I have a component named "Popover Item". On that component I applied a hovered interaction. The layer structures in the component variants are already the same. After that, I inserted the instance of that component into another component named "Popover". Then, I inserted the instance of the Popover component into a "Navigation" component.
The prototype runs normally and as expected when I use the instance of the Navigation component on the "Homepage" page. The hovered interaction also works as I imagined. Even when I convert the Homepage page into a component, the interaction from Navigation still runs normally.
The problem arises when I create a prototype from the instance of that Homepage component. What's strange is that the icon on the Popover Item instance that I had already overridden to be hidden in the Navigation component, suddenly appears after being hovered. I have checked and I think this is not a layer structure problem. However, of course I can be wrong and miss something.
I'm including a video for better clarity, check it here: https://drive.google.com/file/d/1QGE375G_nrHPU5JD6ogJj1_9DuGxWM54/view?usp=sharing
And this is a link to my file: https://www.figma.com/design/yYBOqrqAJroMYvybtwpdnu/-UI-UX--Cahayu-Website?node-id=7206-12936
Thank you for everyone who can help me solving this issue.
.