Making states reactive on hover for Bootstrap menu in react loop

So, I'm looping the data but the I can't get the perfect solution for making the onMouseEnter and onMouseLeave reactive independently.

  const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = (event) => {
      setIsHover(true);  
   };
   const handleMouseLeave = (event) => {
      console.log(event.target.id);
      setIsHover(false);
   };

    return subMenu.map((item) => {
      return (
        <>
          <Dropdown as={NavItem} className={`${styles.navItem} ${styles.navDropdown}`}>
            <Dropdown.Toggle
              anima
              as={NavLink}
              className={styles.withoutDefaultArrow}
              id={item.id}
              key={item.id}
              href={item.url}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              {item.label}
              {item.children.length > 0 && <ArrowDown style={styles.arrowReusable} color={arrowsColor} />}
            </Dropdown.Toggle>
            {item.children.length > 0 && (
              <Dropdown.Menu
                className={`${color} ${styles.subMenu}`}
                show={isHover}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
              >
                {item.children.map((child) => {
                  return (
                    <Dropdown.Item key={child.id} href={child.url}>
                      {child.label}
                    </Dropdown.Item>
                  );
                })}
              </Dropdown.Menu>
            )}
          </Dropdown>
        </>
      );
    })

I've been thinking if useRef might be a good idea used it failed with that. Tried with useState but still not working. Would really appreciate the help. Here's a link to Code my project is a Next.js app.