Fragment with dangerouslySetInnerHtml replacement -

StringToNode.tsx

import React from 'react';

interface IProps {
  children: unknown;
}

/**
 * Takes node content and makes JSX element out of it (kind of like dangerouslySetInnerHTML)
 * Careful, always sanitize input!
 * credit @yairEO https://github.com/facebook/react/issues/12014#issuecomment-1621382570
 *
 * Usage: `React.createElement(StringToNode, null, stringContent)` | <StringToNode>{stringContent}</StringToNode>
 */
const StringToNode = React.memo(({ children }: IProps) => {
  const ref = React.useRef();

  React.useEffect(() => {
    if (ref.current) {
      (ref.current as HTMLSpanElement).outerHTML = children as string;
    }
  }, [children]);

  return <span ref={ref} />;
});

export default StringToNode;