bind a class to a item in a list when clicked react js

Question

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

  const [menuOpen, setMenuOpen] = useState(false);
  const [indx, setI] = useState(Number);
  checkIndex = (index: SetStateAction<number>) => {
  setI(index);
  };

const toggleMenuOpen = (index: SetStateAction<number>) =>{
  setMenuOpen(!menuOpen)
  setI(index);
}
 <div  onMouseEnter={() => toggleMenuOpen(index)} onMouseLeave={() => 
setMenuOpen(false)} 
 className={classNames(menuOpen ?  "font-bold " : "", "py-[40px] font-normal hover:font- 
  bold")}>{x.name}
   
    </div>
   )}
 {menuOpen ? <span className={`${navigations[indx].arrowClass}`}/> : ""}