Modal does not close after first click on the overlay

Summary:

Modal ignores the first click on the overlay and closes only after a second click

Steps to reproduce:

1. Open code sandbox (https://codesandbox.io/s/heuristic-goodall-n25g2w?file=/src/App.js) on the chrome browser (version 103)
2. Click on the input field
3. After modal opens, click on the overlay

Expected behavior:

Modal closes after the first click on the overlay

Link to example of issue:

https://codesandbox.io/s/heuristic-goodall-n25g2w?file=/src/App.js

Additional notes:

I've noticed that if I set 'top: 40px' to the 'modal' class, everything works as expected