Wrapper component for mermaid.js to use in React+TS

Mermaid.tsx

import React, { useEffect, useRef, useState } from "react";
import mermaidAPI from "mermaid";

type Props = {
  divId: string;
  children: string;
};

export default function Mermaid({ children }: Props) {
  const [html, setHtml] = useState<string>("");
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!divRef.current) {
      return;
    }
    try {
      mermaidAPI.initialize({
        securityLevel: "loose",
        logLevel: 1,
        startOnLoad: true,
        flowchart: {
          useMaxWidth: true,
          htmlLabels: true,
        },
      });
      mermaidAPI.render("mermaid", children, (svgCode, bindFunc) => {
        setHtml(svgCode);
        setTimeout(() => {
          bindFunc(divRef.current!);
        }, 500);
      }, divRef.current);
    } catch (error) {
      console.error(error);
      console.error(children);
    }
  }, [children, divRef]);

  return (
    <div
      className="mermaid flex justify-center"
      dangerouslySetInnerHTML={{ __html: html }}
      ref={divRef}
    >
    </div>
  );
}

need to use setTimeout to bind click event with the svg after rendering.