Batched state changes are not flushed if the promise code changes the DOM (= attaching an iframe). Reproduceable with Safari.

React version: 18.1.0

## Steps To Reproduce

1. Open [codepen](https://codepen.io/kh-viewar/pen/wvpVLxM) with Safari.
2. Click "Upload"
3. => "Spinner" text does not render while Promise is in pending

Link to code example:

https://codepen.io/kh-viewar/pen/wvpVLxM

## The current behavior

State changes are not executed.

## The expected behavior

State should change to true and render spinner component. After promise is resolved (2 seconds timeout), state should switch back to false and spinner component should unmount.

## Original discussion

https://github.com/facebook/react/issues/24365
inside `componentDidCatch` is itself flawed — that's why we recommend
   `getDerivedStateFromError` instead. However, it could be improved by
   checking if remainingLanes includes Sync work, instead of whether there's
   any work remaining at all (which would also include stuff like Suspense
   retries or transitions). It's been like this for a while, though, so fixing
   it probably isn't that urgent.
  if (remainingLanes === NoLanes) {
     I
     e
    legacyErrorBoundariesThatAlreadyFailed = null;
  }
  if (__DEV__ && enableStrictEffects) {
    if (!rootDidHavePassiveEffects) {
      commitDoubleInvokeEffectsInDEV(root.current, false);
    }
  }
  onCommitRootDevTools(finishedWork.stateNode, renderPriorityLevel);
  if (enableUpdaterTracking) {
    if (isDevToolsPresent) {
      root.memoizedUpdaters.clear();
    }
  }
  if (__DEV__) {
    onCommitRootTestSelector();
  }
   Always call this before exiting `commitRoot`, to ensure that any
   additional work on this root is scheduled.