custom hook to load script in reactjs

Here is the code for loading script in react

import { useEffect, useState } from "react";

const useScript = (src: string, id: string) => {
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);

  useEffect(() => {
    const scriptElement = document.getElementById(id) as HTMLScriptElement;

    if (!scriptElement) {
      const script = document.createElement("script");
      script.id = id;
      script.src = src;
      script.async = true;
      script.defer = true;

      script.onload = () => {
        setLoaded(true);
        setError(false);
      };

      script.onerror = () => {
        setLoaded(false);
        setError(true);
      };

      document.head.appendChild(script);

      return () => {
        script.remove();
      };
    } else {
      setLoaded(true);
    }
  }, [src, id]);

  return { loaded, error };
};

export default useScript;

"use client";
import React, { useEffect, useState } from "react";
import useScript from "./useScript"; // Adjust the path as needed

declare global {
  interface Window {
    turnstile: any;
  }
}

const BasicContactForm = () => {
  const [isMounted, setIsMounted] = useState(false);
  const [widgetId, setWidgetId] = useState("");

  // Load the Turnstile script
  const { loaded, error } = useScript(
    "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit",
    "turnstile-script"
  );

  useEffect(() => {
    setIsMounted(true);
  }, []);

  useEffect(() => {
    if (loaded && isMounted) {
      let id = window.turnstile.render("#myWidget", {
        sitekey: process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY,
        theme: "light",
      });
      setWidgetId(id);
      console.log("Turnstile rendered and loaded");
    }
  }, [loaded, isMounted]);

  return (
    <form
      className="md:w-1/2 flex-grow"
      style={{ maxWidth: "800px" }}
      onSubmit={SendMessage}
      role="form"
      id="f1"
      name="f1"
    >
      <h1 className="text-center text-primary">Contact Me!</h1>

      <div className="row">
        <div className="col-md-12 mb-3">
          <div className="form-group">
            <input
              type="text"
              name="name"
              className="form-control"
              id="name"
              placeholder="Your Name"
              required
            />
          </div>
        </div>
        <div className="col-md-12 mb-3">
          <div className="form-group">
            <input
              type="email"
              className="form-control"
              name="email"
              id="email"
              placeholder="Your Email"
              required
            />
          </div>
        </div>
        <div className="col-md-12 mb-3">
          <div className="form-group">
            <input
              type="text"
              className="form-control"
              name="mobile"
              id="mobile"
              placeholder="Mobile No"
              required
            />
          </div>
        </div>
        <div className="col-md-12">
          <div className="form-group">
            <textarea
              style={{ height: "auto", minHeight: "200px" }}
              className="form-control"
              name="message"
              placeholder="Message"
              required
            ></textarea>
          </div>
        </div>
        <div className="col-md-12 text-center my-3">
          <div id="loading" className="myhidden loading">
            Loading
          </div>
          <div id="thanks" className="myhidden sent-message">
            Your message has been sent. Thank you!
          </div>
        </div>
        <div className="col-md-12 text-center">
          <button
            type="submit"
            className="button button-a button-big button-rouded"
          >
            Send Message
          </button>

          {isMounted && (
            <div
              id="myWidget"
              data-sitekey={
                process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY
              }
            ></div>
          )}
        </div>
      </div>
    </form>
  );
};
export default BasicContactForm;