I have added mouseleave event on the current page HTML tag inside useEffect(didMount) of my react application and the expected behavior is that the event should be triggered when the cursor leaves the window. But the event is sometimes getting triggered when the user is normally scrolling through the page.

Here's the code snipped which I have added.

const pageHtml = document.getElementsByTagName('html')[0];
const mouseLeaveHandler = () => {
  console.log('Left::');
};

pageHtml.addEventListener('mouseleave', mouseLeaveHandler);

I just want to show a popup only when the mouse pointer leaves the current browser window. So, any help related to this would be appreciated.