NextJS custom component hydration

Question

I have page with "getServerSideProps" functionality which makes API call and as a result receive page props. Props have different fields and one of them contains raw html string (example below):

<div>
   <h2>Some content</h2>
   <macro alias="alias" params="JSON" />
</div>

macro tag should be replaced with React Component which is done by using ReactDOMServer.renderToString(template)

Than using Cheerio library content is replaced in raw html string and all props are passed to Page Component which is rendered. Raw HTML string is rendered using dangerouslySetInnerHTML={{ __html: summary }}

Some macros may contain client side logic and because of this I need make hydration on client side what can be done by using hydrateRoot where I passing Component with params and ref to the DOM element.

Problem is that hydrateRoot throws this error:

And also for some reason wrapper div is duplicated:

If I don't use hydrateRoot than there is no duplications but client side logic is not working.

Can someone explain me what I'm doing wrong or maybe someone can give me advice how can I implement previous described logic?

Answer 1

I found the solution. I just need to wrap content with another div and use this div as a root for hydration in this case hydration process went without errors.