Hello, I'am using nextjs with typescript and discovered the issue that onMouseEnter is not working for me. I dont know exactly why. Can anybody tell me or help me?


handleMouseEnter:

const handleMouseEnter = (index: number) => {
    setCurrentHover(index as number)
    console.log(index)
  }

html / react element:

<div className="flex flex-col items-center justify-center mt-4 w-full gap-4">
            {pages.map((page, index) => (
                <a
                    key={index}
                    className={`flex items-center cursor-pointer w-full px-4 py-2 text-lg font-bold text-left rounded-md transition duration-300 ease-in-out`}
                    onMouseEnter={() => handleMouseEnter(index)}
                    onMouseLeave={() => setCurrentHover(false as any)}
                >
                    {page.name}
                </a>
            ))}

            <div className={`z-[-1] block h-12 w-[19.5rem] bg-neutral-700/5 rounded-lg absolute top-0 left-0`}
                style={{
                    transform: `translateY(${currentHover as number | any * 3.5}rem)`,
                    transition: 'transform 0.3s ease-in-out',
                }}
            >
                <div className="bg-gradient-to-t from-purple-500 via-blue-500 to-pink-500 h-3/4 w-1 mt-1.5 rounded-full" />
            </div>
        </div>

(it doesn't get logged in the console.)