React onMouseEnter and onMouseLeave bug, not working consistently

I am having issues with React onMouseEnter and onMouseLeave, sometimes the events are not firing when it should

I am using onMouseEnter and onMouseLeave to show/hide a React Portal Modal tooltip panel:

the issue:

if the mouse cursor hovers over the images slowly, onMouseEnter and onMouseLeave works as expected, but if the mouse cursor hovers over the image rapidly ( horizontally ), the code breaks, and multiple tooltip panels are shown ( because onMouseLeave failed to trigger )

here is the video link showing the issue: https://www.veed.io/view/7669d6c4-6b18-4251-b3be-a3fde8a53d54?sharingWidget=true

here is the codesandbox link for bug I mentioned: https://codesandbox.io/s/epic-satoshi-rjk38e

any help is appreciated

from React onMouseEnter and onMouseLeave bug, not working consistently