Why a list of hover effect not working when hovering fast?

Question

So I have a list of items. Each item, on hover, displays a gear icon.

However, please see the video, if I hover fast enough, some gear icons lingered on the UI even when my cursor has moved to other places.

I use Framer Motion's onHoverStart and onHoverEnd props to set the hover state.

The code for a single row looks like this using Framer Motion 7.8.1 and DaisyUI 4.0.7:

const [hover, setHover] = useState(false);
return <>{hover && 

    <details key={id} className="dropdown dropdown-end dropdown-top">
        <summary className="list-none block">
          <GearIcon  />
        </summary>

        <div className="dropdown-content menu">
                  ...
        </div>
     </details>

}</>

Note that the janky UI only happens when I quickly hove over the gear icons. If I hover any other regions to the left quickly, the bug doesn't appear.