Need Help: Side Nav Component Variants Not Updating Based on Variable in Design System

Hi all,
I’m working on a design system and trying to create an interactive side navigation menu using component variants + a shared variable (selectedItem). Each nav item has two variants: default and selected.

Here’s what I’ve set up:

1. Each menu item has a label property (e.g., "Dashboard", "Settings", etc.)

2. On click, the interaction sets the variable: selectedItem = "Settings"

3. Then I added conditional logic:
    • If selectedItem == "Settings" → switch to selected
    • Else → switch to default

🎯 Goal: When one nav item is selected, all other items should revert to default – only one selected item at a time.

❌ Issue: Only the clicked item changes. The rest don’t respond to the variable update.
✅ I even tried using While value of variable changes or placing the logic in each item’s On Click – still not getting the expected behavior.

👉 What am I missing? How can I ensure all nav items reactively update based on the selectedItem variable?

This is for a reusable side nav component in my design system, so it needs to be scalable.
Any guidance, working examples, or best practices would be super helpful. 🙏