Así que tengo un menú desplegable con 7 elementos y se ve así:

 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>

Como dije, hay 7 elementos, todos se ven así con contenido diferente. Pero cuando lo desplazo, todos muestran el mismo contenido, ¿cómo puedo lograr orientar el contenido que quiero mostrar?

Algunos dijeron que usaran el gancho useRef, pero no puedo lograr que funcione, así que simplemente eliminé el código.