React component for Typograms about typograms HOT 2 CLOSED

import { useEffect, useRef } from "react";
import create from "typograms/src/typograms";

export const Typogram = ({ source }: { source: string }) => {
  const renderedSvg = create(source);
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (divRef.current) {
      // Clear previous children
      divRef.current.innerHTML = "";

      // Append the rendered SVG element
      divRef.current.appendChild(renderedSvg);
    }
  }, [renderedSvg]);

  return <div ref={divRef} />;
};

function App() {
  return (
      <Typogram
        source={`
      +----+
      |    |---> My first diagram!
      +----+
      `}
      />
  );
}

declare module "typograms/src/typograms" {
  function create(
    source: string,
    zoom?: number,
    debug?: boolean
  ): SVGSVGElement;
  export = create;
}