Add React Component in html string using parser

content.jsx

import parse, { Element } from "html-react-parser";
import { TestCard } from "./test-card";

function addTestCard(html: string): string {
    // Define a regular expression pattern to match [template id="some-id-in-number"]
    const templateRegex = /\[template id="(\d+)"]/g;
  
    const replacedHTML = html.replace(templateRegex, (match, id) => {
      return `<div id="test_card" tag=${id} />`;
    });
  
    return replacedHTML;
}

export const getHTMLWithAllCards = (
    content: string = "",
  ) => {
    let updatedHTML = addTestCard(content);
  
    return parse(updatedHTML, {
      replace(domNode) {
        const attr = (domNode as Element).attribs;
        if (!attr) return null;
        if (attr.id === "test_card" && attr.tag) {
          return <TestCard id={attr.tag} />;
        }
      },
    });
  };

  const ContentSection = ({ content = "" }) => {
    const htmlWithCardJSX = getHTMLWithAllCards(content);

    return <div>{htmlWithCardJSX}</div>;
  };