Embedding a Flow in a React Component

import React from "react";
import { useEffect } from "react";

declare global {
  interface Window {
    flowbox?: any;
  }
}

const EmbedFlow = () => {
  const flowboxKey = "INSERT FLOW KEY HERE";
  useEffect(() => {
    const initializeFlowbox = () => {
      if (window.flowbox) {
        window.flowbox("init", {
          container: "#js-flowbox-flow",
          key: flowboxKey,
          locale: "INSERT LOCALE HERE"
        });
      }
    };

    const scriptId = "flowbox-js-embed";
    if (!document.getElementById(scriptId)) {
      const script = document.createElement("script");
      script.id = scriptId;
      script.async = true;
      script.src = "https://connect.getflowbox.com/flowbox.js";
      script.onload = initializeFlowbox;
      document.body.appendChild(script);
    } else {
      initializeFlowbox();
    }
  }, []);
  
  return (
    <div id="js-flowbox-flow"></div>  
  );
  
};

export default EmbedFlow;