Hello, I'm having an issue with hydration of SSR components using renderToPipeableStream and hydrateRoot. I have a minimum reproduction case here: https://github.com/laverdet/react-issue. Just run npm install; npm start and navigate to localhost:8000.

The error produced follows:

react-dom.development.js:87 Warning: Prop `id` did not match. Server: "async" Client: "after"
    at span
    at Suspense
    at div

The relevant bits of implementation are reproduced below--

app.jsx

const Async = lazy(async () => import('./hot.jsx') });

export const app = <div>
	<Suspense fallback={<div>Loading...</div>}>
		<Async />
		<span id="after">after</span>
	</Suspense>
</div>;

hot.jsx

export default function Async() {
	return <span id="async">async</span>;
}

If I wrap Async directly in a suspense element it will work: <Suspense fallback={null}><Async /></Suspense>