<Transition> with <Suspense> throws <DOMException: Failed to execute 'insertBefore' on 'Node'> when switching components quickly

[b10-as]

Vue version

3.5.0

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ru5fxj?file=src%2FApp.vue

Steps to reproduce

<template>
  <Transition mode="out-in" name="fade">
    <Suspense>
      <Component :is="Component" />
    </Suspense>
  </Transition>
</template>

Click the button to trigger the error, it quickly switches between the 4 components. First an async component, then a sync component, then a different async component, and finally a different sync component.
This throws the exception: Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

What is expected?

"Sync Component B" should be rendered (after a transition animation)

What is actually happening?

The following error is thrown:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

In addition, the content of the Suspense slot is removed and the page remains broken.

System Info

No response

Any additional comments?

It appears to be the same issue as this one: #8105
But more difficult to reproduce because it requires switching between more components

[edison1105]

minimal reproduction with playground