Firefox: Interacting with the rendered page triggers SecurityError

🐛 bug report

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project
  adheres to.
• I have searched the issue tracker for an issue that matches the one I want
  to file, without success.

Description of the problem

The first time I click on the rendered content, I see a React error overlay reporting:

Security Error: Permission denied to access property "dispatchEvent" on cross-origin object

How has this issue affected you? What are you trying to accomplish?

I can't actually use codesandbox to work on anything. I have to export a zip and work it locally.

I also tried in Vivaldi, but ran into a known issue that Vivaldi does not support inspecting iframes.

To Reproduce

• Launch Firefox
• Visit: https://codesandbox.io/s/exercise-mobile-friendly-modal-d2klo?file=/src/Modal.js
• Try to click the button

Link to sandbox: link (optional)

Your Environment

Reproduce the issue in Firefox using the linked CodeSandbox and the steps provided, then trace the rendered-page interaction and cross-origin iframe behavior that produces the SecurityError. Done means clicking the rendered content works without the React error overlay in the reported Firefox environment.