So I have a dropdown menu with 7 elements and it looks like this:

const [isHidden, setIsHidden] = useState(false);
 return (
 <div className="menu">
    <div
      className="col-2"
      onMouseEnter={() => setIsHidden(true)}
      onMouseLeave={() => setIsHidden(false)}
    >
      <div className="wrapper">
        <li className="select-none bot_line">products</li>
      </div>

      <div className={isHidden ? "visible_bot_menu" : "hidden_bot_menu"}>
        <div className="left_menu">
        </div>
      </div>
 </div>

As I said, there are 7 elements, they all look like this with different content. But when I hover it, they all display the same content, how can I manage to target which content I want to display?

Some said to use the useRef hook but I can't manage to make it work so I just deleted the code.