HTML custom block is making a weird behavior during render

[jericho-forte]

I'm using datocms-structured-text-to-html-string and I have inserted a custom block (HTML block with a table inside) but for some reason it is rendering twice and the second one has incorrect tags when it should it only render once. Can anyone help or point out if I'm doing something wrong?

Here is the code snippet:

  const options = {
    renderBlock({ record, adapter: { renderNode } }: any) {
      return renderNode(record.table);
    },
  };

  const raw = useMemo(
    () => render(content[translation], options) as string,
    [content, translation]
  );

return ( 
  <div
      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(raw) }}
    />
)

record.table contains when I log it to the console:

<table border="1" style="border-collapse: collapse;">
<tbody>
<tr>
<td>Hello 1</td>
<td>Hello 2</td>
<td>Hello 3</td>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 2</td>
<td>Hello 3</td>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 2</td>
<td>Hello 3</td>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 2</td>
<td>Hello 3</td>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 2</td>
<td>Hello 3</td>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 2</td>
<td>Hello 3</td>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 2</td>
<td>Hello 3</td>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 2</td>
<td>Hello 3</td>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 2</td>
<td>Hello 3</td>
</tr>
<tr>
<td>Hello 1</td>
<td>Hello 2</td>
<td>Hello 3</td>
</tr>
</tbody>
</table>

and it's showing up like this:

[arcataroger]

Hi @jericho-forte,

What are the inputs to content and translation here? It'd be easiest if you could please make a reproduction of this in a working repo (like a codesandbox/codepen etc.), but if that's too much trouble, could you please at least provide just the JSON snippet that's going into those?

I suspect what's going on is that renderNode() is giving you DOM nodes, but then those nodes are being render()ed in the useMemo(), and they're not really being stringified (I think as string would be a TypeScript hint, rather than actually changing the data type like String(render(content[translation], options)) would?)

But in any case, is there a reason you need to mix & match renderNode() and dangerouslySetInnerHtml? Can you just use one or the other, either output the entire thing as nodes or as a string?

If you could please provide a reproduction or some input snippets, I can better troubleshoot this for you. Right now I'm just kinda guessing in the dark, but with more details, we can figure out what's going on.

And if you prefer, you can also email us the details at support@datocms.com (up to you). Thank you!