Repository: react
Issue: Bug: Firefox and react-dom causing null access property
Labels: Type: Bug,Component: DOM,Status: Unconfirmed

<!--
  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 setState fast enough can reproduce this while this seems the most usable way to reproduce.

## The current behavior
When dragging a file over the zone fast enough and coming back to the complex element it triggers an error :
`
16:38:47.408 Uncaught TypeError: can't access property "__reactFiber$6wig1bzlbmp" of null
    React 3
    unstable_runWithPriority scheduler.development.js:468
    React 12
    tsx index.tsx:6
    tsx main.chunk.js:263
    Webpack 7
react-dom.development.js:10578
    React 3
    bind_applyFunctionN self-hosted:1376
    dispatchEvent self-hosted:1339
    unstable_runWithPriority scheduler.development.js:468
    dispatchUserBlockingUpdate React
    bind_applyFunctionN self-hosted:1376
    dispatchUserBlockingUpdate self-hosted:1339
    React 4
    forEach self-hosted:4356
    React 7
    tsx index.tsx:6
    tsx main.chunk.js:263
    Webpack 7
`


Screenshots of errors (First one is firefox "normal" and second one is firefox developer edition) :
![Firefox on Windows](https://user-images.githubusercontent.com/7894362/119522819-92b71b00-bd7c-11eb-9335-338d40a69c0d.png)
![Firefox developer edition on ArchLinux](https://user-images.githubusercontent.com/7894362/119523063-c1cd8c80-bd7c-11eb-88bb-ae58672c22d8.png)

## The expected behavior
React shouldn't trigger an error.