Bug: Firefox and react-dom causing null access property

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --> React version: 17.0.2 ## Steps To Reproduce 1. create a component with a state 2. add elements added conditionally from state 3. add a (complex ?) component like input, textarea, select, iframe etc inside the elements added conditionnaly 4. open firefox and drag a file above the zone fast enough and then come back to the complex element (it might be really hard to trigger so I suggest to drag around really fast) <!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. --> Link to code example: [CodeSandbox](https://codesandbox.io/s/unruffled-torvalds-xpikd?file=/src/App.js) Minimal (with the maximum of details I have) reproduction : ```ts const FileInput: React.FC = () => { const fileZone = useRef<HTMLDivElement>(null); const [dragging, setDragging] = useState(false); useEffect(() => { const handlers = { dragenter() { setDragging(true); }, dragleave() { setDragging(false); }, }; const div = fileZone.current as HTMLDivElement; Object.entries(handlers).map(([key, value]) => div.addEventListener(key, value), ); return () => { if (div) { Object.entries(handlers).map(([key, value]) => div.removeEventListener(key, value), ); } }; }, [fileZone]); return ( <div ref={fileZone}> {dragging ? ( <>drop here</> ) : ( <> drop here or{" "} <label> Search <input /> </label> </> )} </div> ); }; ``` Here I used the dragevent to trigger the state but I think anything firing s…