<!--
  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: 241c446

## Steps To Reproduce

https://codesandbox.io/s/romantic-gates-2hrjp

1. Click "Show A" to render the lazy component.  
2. Type into the input whose placeholder says it works. startTransition will call, inline loading will show for 2 seconds, then the Suspense boundary will trigger.
3. Click the "update" button - same as above - everything works
4. Now type into the input whose placeholder says it *doesn't* work. Note that the inline placeholder stays up for the entire time; the Suspense boundary never shows.
5. Now note that steps 2 or 3 will likely immediately show the suspense boundary. The bypassed rendering of the Suspense boundary from step 4 seems to be backed up, stuck somewhere, and is now unleashed.

Note that steps 2 and 3 are optional. No matter what, the preventDefault that's called in step 4 causes this incorrect behavior no matter whether steps 2 or 3 have been exercised. 

<!--
  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:  see above

<!--
  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
  repository on GitHub, or provide a minimal code example that reproduces the
  problem. You may provide a screenshot of the application if you think it is
  relevant to your bug report. Here are some tips for providing a minimal
  example: https://stackoverflow.com/help/mcve.
-->

## The current behavior

startTransition should suspend after the timeout even if event.preventDefault is called.

## The expected behavior

it does not 
let rootDoesHavePassiveEffects: boolean = false;
let rootWithPendingPassiveEffects: FiberRoot | null = null;
let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoPriority;
let pendingPassiveEffectsExpirationTime: ExpirationTime = NoWork;
let pendingPassiveHookEffectsMount: Array<HookEffect | Fiber> = [];
let pendingPassiveHookEffectsUnmount: Array<HookEffect | Fiber> = [];
let pendingPassiveProfilerEffects: Array<Fiber> = [];
let rootsWithPendingDiscreteUpdates: Map<
  FiberRoot,
  ExpirationTime,
> | null = null;
 Use these to prevent an infinite loop of nested updates
const NESTED_UPDATE_LIMIT = 50;
let nestedUpdateCount: number = 0;
let rootWithNestedUpdates: FiberRoot | null = null;
const NESTED_PASSIVE_UPDATE_LIMIT = 50;
let nestedPassiveUpdateCount: number = 0;
 Marks the need to reschedule pending interactions at these expiration times
 during the commit phase. This enables them to be traced across components
 that spawn new work during render. E.g. hidden boundaries, suspended SSR
 hydration or SuspenseList.
let spawnedWorkDuringRender: null | Array<ExpirationTime> = null;
 Expiration times are computed by adding to the current time (the start
 time). However, if two updates are scheduled within the same event, we
 should treat their start times as simultaneous, even if the actual clock
 time has advanced between the first and second call.
 In other words, because expiration times determine how updates are batched,
 we want all updates of like priority that occur within the same event to
 receive the same expiration time. Otherwise we get tearing.
let currentEventTime: ExpirationTime = NoWork;