How to prevent the onmouseleave event from being triggered outside the browser?

I have a little try below. When i enter the mouse inside of the basket, a dropdown with a button appears. When we click the button a modal appears.I want the modal to close only when the close modal button is clicked. But when we take the mouse out of the browser the hideDropdown function is triggered and the modal closes. I sent the hideDropdown function as a prop to the component whose Modal state was updated, but this time only the hideDropdown function worked and the isModalShow state was not updated. How can i solve this?

Demo: jolly-buck-1lgmiu - CodeSandbox