Sequel and Marketo embed code in React

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

export function useExternalScript(src: string, module = false) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    if (module) script.type = "module";
    document.body.appendChild(script);

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

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

interface Props {
  sequelEventId: string;
  marketoDomain: string; // e.g., "882-TRU-959.mktoweb.com"
  loadMarketoForm?: boolean;
}

export default function SequelMarketoEmbed({
  sequelEventId,
  marketoDomain,
  loadMarketoForm = true
}: Props) {
  // Load Sequel + Marketo scripts
  useExternalScript("https://prod-assets.sequelvideo.com/uploads/toolkit/sequel.js", true);
  useExternalScript(`//${marketoDomain}/js/forms2/js/forms2.min.js`);

  useEffect(() => {
    const interval = setInterval(() => {
      if (window.Sequel && window.MktoForms2) {
        // Render Sequel with Marketo form
        window.Sequel.renderSequelWithMarketoFrame({
          sequelEventId,
          loadMarketoForm,
        });
        clearInterval(interval);
      }
    }, 100);

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

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

<SequelMarketoEmbed
  sequelEventId="d05a39c9-b5ba-4f4b-bd1d-58c3440ead91"
  marketoDomain="882-TRU-959.mktoweb.com"
/>