title: bind a class to a item in a list when clicked react js
body: <p>We have a list of navigation items to render as so below then when the item is rolled over a menu shows under it. while the menu it open i want that set index item to show a caret next to it. having a bit of a struggle doing this the way below. i get the caret on every list item when open</p>
  <pre><code>  const [menuOpen, setMenuOpen] = useState(false);
    const [indx, setI] = useState(Number);
    checkIndex = (index: SetStateAction&lt;number&gt;) =&gt; {
    setI(index);
    };
  
  const toggleMenuOpen = (index: SetStateAction&lt;number&gt;) =&gt;{
    setMenuOpen(!menuOpen)
    setI(index);
  }
   &lt;div  onMouseEnter={() =&gt; toggleMenuOpen(index)} onMouseLeave={() =&gt; 
  setMenuOpen(false)} 
   className={classNames(menuOpen ?  &quot;font-bold &quot; : &quot;&quot;, &quot;py-[40px] font-normal hover:font- 
    bold&quot;)}&gt;{x.name}
     
      &lt;/div&gt;
     )}
   {menuOpen ? &lt;span className={`${navigations[indx].arrowClass}`}/&gt; : &quot;&quot;}   
  </code></pre>