React version: 18.0.0

## Steps To Reproduce

1. Add a Suspense Boundary
2. Add a **component that will suspend** to load some data (faked).
3. Render at least one **sibling component** _after_ the suspending component.
3. Render server-side using renderToPipeableStream()
4. Render client-side using hydrateRoot()

__Reproductions in CodeSandbox:__

- [Reproduction 1](https://yt3148.sse.codesandbox.io) with Next.js [Edit](https://codesandbox.io/s/github/xiel/SuspenseHydrationErrorNext)
- [Reproduction 2](https://codesandbox.io/s/brave-euclid-lx3et7?file=/server/render.js) using renderToPipeableStream (based on [example demo](https://codesandbox.io/s/kind-sammet-j56ro?file=/server/render.js:1054-1614))

````jsx
<>
  <h4>This headline hydrates fine. </h4>
  <SomethingA />{/* Will suspend on client and server */}
  <h3>💥 This element after the suspending Component triggers an error (only in development).</h3>
</>
````

## The current behavior

- The sibling component following the suspending component is incorrectly seen as a **hydration mismatch**.
- Console will show errors (and Next.js will show big error overlay):

````
Warning: Expected server HTML to contain a matching <h3> in <div>.
    at h3
    at IndexPage
    at Suspense
    at App (webpack-internal:///./pages/_app.js:42:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23179)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:825:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:949:27)
````

````
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?ac89:14344:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?ac89:14372:1)
    at updateHostComponent$1 (react-dom.development.js?ac89:20636:1)
    at beginWork (react-dom.development.js?ac89:22373:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4206:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4270:1)
````

- Depending on the location of the suspending component and their siblings, there are errors or no errors at all. When the suspending component is the last component, there are no errors logged.
- Error can be suppressed by wrapping the suspending component in a Suspense boundary directly

## The expected behavior

- I expect to be able to use the same fetching mechanism using suspense on server and client in [React v18](https://reactjs.org/blog/2022/03/29/react-v18.html#suspense-in-data-frameworks).
_OR_
- If this is unsupported usage, the errors should be more clear and consistent.
return 'Sibling';
    }
    function TextChildWithSibling({text}) {
      return (
        <div>
          <Sibling />
          {text}
        </div>
      );
    }
    const container2 = document.createElement('div');
    container2.innerHTML = ReactDOMServer.renderToString(
      <TextChildWithSibling text="good" />,
    );
    expect(() => {
      act(() => {
        ReactDOMClient.hydrateRoot(
          container2,
          <TextChildWithSibling text="bad" />,
          {
            onRecoverableError(error) {