Sequel and Hubspot embed code in React

// hooks/useExternalScript.ts
import { useEffect } from "react";

export function useExternalScript(src: string, type = "text/javascript", module = false) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    script.type = module ? "module" : type;

    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [src, type, module]);
}

// components/SequelHubSpotEmbed.tsx
import { useEffect } from "react";
import { useExternalScript } from "@/hooks/useExternalScript";

interface Props {
  sequelEventId: string;
}

export default function SequelHubSpotEmbed({ sequelEventId, hubspotFormOptions }: Props) {
  useExternalScript("https://prod-assets.sequelvideo.com/uploads/toolkit/sequel.js", "module", true);
  useExternalScript("https://js.hsforms.net/forms/v2.js");

  useEffect(() => {
    // Wait for both scripts to load
    const interval = setInterval(() => {
      if (window.hbspt && window.Sequel) {
        // Load Sequel
        window.Sequel.renderSequelWithHubspotFrame({
          sequelEventId,
        });

        clearInterval(interval);
      }
    }, 100);

    return () => clearInterval(interval);
  }, [sequelEventId]);

  return (
    <>
      <div id="hubspotForm" />
      <div id="sequel_root" />
    </>
  );
}

<SequelHubSpotEmbed
  sequelEventId="d05a39c9-b5ba-4f4b-bd1d-58c3440ead91"
/>