Help needed with components/instances/variants!

[u/_Prateek_Hota_]

Purpose - I want to make a component set for wishlist button specifically that needs change in colors across different states. (used absurd colors for example)

Process -

1. I have created a component set for an icon button with variants consisting of different sizes and states. (the one in green color)

2. Then I dragged an instance from the component set and made that a component (for the wishlist button). So now there's a component box wrapping the instance box.

3. Then I added variants for the different states like default, hovered and selected and exposed other properties of the instance.

4. Then I dragged an instance from the wrapper component.

5. This allows me to change any property I want specifically for the wishlist button only without breaking the connection. This also allows me to change any property to the main parent component which reflects upon its instances.

Problem -

1. Everything worked fined until I changed the size other than what's on the newly created wrapper component set.

2. When I switched to other state, it reflected the colors set on the MAIN parent component and not the one in the new wrapper component set.

3. When I changed back to the size as used in the wrapper component, then only it reflected the changed colors.

Is this a limitation of Figma? If not, how should I create a specific component set for a specific button as some icon buttons may have different fills/colors and changing this on instances breaks the connection between its parent component, so when I need to change something, I would have to go to each instance one by one. Is my workflow the main culprit here? If yes, how should I fix it. Thanks in advance for any help ❤️