Unable to nest components in a hydrated component

[sethmoon]

When running Remix on the server, I want to be able to nest components inside my hydrated component in order to compose components together. This would prove useful for forms and UI elements like accordions. Currently, if a hydrated component is returned to the client that contains either another hydrated component or even just a plain server rendered component, a hydration mismatch error will be thrown in the logs.

Specifically, I see the following in the logs when attempting to render this Demo component: vdom.js:453 Hydration mismatch: excess <div>this is the hydrated sub component</div>

Example:

import { hydrated, type Remix } from "@remix-run/dom";
import { routes } from "../../routes";

export const Demo = hydrated(
    routes.assets.href({ path: 'demo.js#Demo' }),
    function (this: Remix.Handle) {
        console.log('Demo this', this);
        return () => {
            return (<div>Demo<HydratedSubComponent /></div>);
        };
    }
)

export const HydratedSubComponent = hydrated(
    routes.assets.href({ path: 'demo.js#HydratedSubComponent' }),
    function (this: Remix.Handle) {
        console.log('HydratedSubComponent this', this);
        return () => {
            return <div>this is the hydrated sub component</div>;
        };
    }
)

The HTML returned by the server is as follows (excluding the document for brevity):

<!-- rmx:h --><div>Demo<!-- rmx:h --><div>this is the hydrated sub component</div><!-- /rmx:h --><script type="application/json" rmx-hydrated>
{"moduleUrl":"/assets/demo.js","exportName":"HydratedSubComponent","props":{},"id":"h1.1"}
</script></div><!-- /rmx:h --><script type="application/json" rmx-hydrated>
{"moduleUrl":"/assets/demo.js","exportName":"Demo","props":{},"id":"h1"}

This can be easily demonstrated in the bookstore example as well if one tries to nest a component (hydrated or otherwise) in cart-button.tsx.