Checked attribute management by React

I was wondering how the 'checked' attribute is managed by React for input type elements. In our application, we have a checkbox ( with on change event) and a button in a page.

1. we click on the button to open a popup.
2. popup attaches a click handler at body level. This event is of type 'capture' to close the popup whenever some random click happens anywhere on the page.
3. Now, if we click on the checkbox the body level click event is executed before the checkbox's onChange event.
4. The click event in turn updates some state, which causes re-render of the checkbox.
5. popup is closed.
6. The onChange event attached with the checkbox never got a chance to be executed.It is lost somewhere.

Here is the sample implementation for the same https://codesandbox.io/s/funny-sun-1c3r6k?file=/src/App.js

We observed, that if we remove the "checked" binding from the jsx, things work just fine.

Though we have a solution, we are not sure what could be the root cause? Any help is appreciated.