Render original HTML and <script> tag in dom

[meesfrenkelfrank]

I know the <script> tag isn't rendered by React dom, as I can read here.

From the api below HTML is returned and I want to add that through the ReactHtmlParser. So by the options its' returning exactly below <script> tag and it's children.

<div class="css-class" data-src="/event/66478667"></div> <script>(function(d, s, id) {var js,ijs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://embed.widget.js";ijs.parentNode.insertBefore(js, ijs);}(document, 'script', 'my-js'));</script>

When I try below, the <script> tag is rendered in the dom (with the correct children data), but the actual HTML <div class="css-class" data-src="/event/66478667"></div> isn't rendered anymore?

import ReactHtmlParser, { Transform } from 'react-html-parser';

 const transform: Transform = (node, index) => {
    if (node.type === 'script' && node.children?.length) {
      console.log('Node', node);
      return <script key={index}>{node?.children[0]?.data}</script>;
    }
    return null;
  };

  const options = {
    transform,
  };

return (
    <div>
      {ReactHtmlParser(text, options)}
    </div>
  );