Mouse cursor outside application window when mouse moved fast

I have a div on which cursor is set to default. When the mouse pointer leaves that div, cursor is supposed to change to blocked_cursor. I have achieved this using

myDiv.addEventListener("mouseleave", handleMouseLeaveOnDiv);

const handleMouseLeaveOnDiv = (event) => {
document.body.classList.add(blocked-cursor);
};

.blocked-cursor * {
  cursor: not-allowed !important;
}

The issue is when mouse pointer leaves the application window, the cursor is supposed to stay as blocked. This also works fine when mouse pointer is moved slowly out of the application window. But if mouse pointer is moved fast outside the application window, it stays as a default cursor only.

Any ideas are appreciated. Thanks.