React version: 18.2.0

Steps To Reproduce

1. Create a tiny app that uses <Suspense> + suspends during hydration + has a hydration mismatch, for example:

   hydrateRoot(
     document.getElementById('app'),
     <StrictMode>
       <Suspense fallback={<SuspenseFallback />}>
         <p>
           Hello from StackBlitz! <span>Hydration mismatch here</span>
         </p>
         <LinkThatSuspends />
       </Suspense>
     </StrictMode>
   );

   (Full code in a StackBlitz)

2. Load the app and observe that the suspense fallback is never mounted

3. Now, wrap the <LinkThatSuspends /> element with a <div>:

   - <LinkThatSuspends />
   + <div><LinkThatSuspends /></div>

   (StackBlitz)

4. Load the app and observe that the suspense fallback is now mounted

Code example: fallback not mounted · fallback mounted

The current behavior

The <Suspense> fallback is rendered inconsistently – depending on whether the element that suspends is wrapped with a <div>?!

The expected behavior

The <Suspense> fallback is rendered either never, or always, no matter if the element that suspends is wrapped with anything.