Instance of the parent component do not show variants of its children

I have made a menu item component that has 3 variants, state, background and with counter.

I put that menu item into another component which is bottom menu. I have instances of menu item inside the menu component. When I select each menu item inside that menu component, I can see and change its variants and it works fine. But when I make an instance of that bottom menu into each page, the menu item variants don’t work, like I change from default to active and it doesn’t show the variant. Very weird and doesn’t make sense to me. Can anyone explain and show how to fix it?

Actually I realised that most variants work but the colour doesn’t change. I have a variant called state, when active it should change the colour of the icon, but doesn’t swap colour. other variants work. In the main bottom menu component colour (state=active) works fine though.