I have this react component, I’m loading a script using useEffect, however, I need this script to unload and reload again everytime this componentis mounted, even when I try to empty the div where this script is injected it actually never gets clean, in the console it keeps its content, why is this happening or how can I rerun that script on mount

"use client";
import Script from "next/script";
import { useEffect } from "react";
import { Container } from "@/components/layout/container";

interface JobOpeningsProps {
  script1: string;
  script2: string;
}

export const JobOpenings = ({ script1, script2 }: JobOpeningsProps) => {
  useEffect(() => {
    const grnhseAppDiv = document.getElementById("script");

    if (grnhseAppDiv) {
      grnhseAppDiv.innerHTML = "";
      console.log("Se cargo", grnhseAppDiv);
      const grnhse_app = document.createElement("div");
      grnhse_app.id = "grnhse_app";
      grnhseAppDiv.appendChild(grnhse_app);
      const script = document.createElement("script");
      script.src = "https://boards.greenhouse.io/embed/job_board/js?for=company";
      script.async = true;
      script.onload = () => {
        console.log("Script loaded successfully");
      };
      script.onerror = (error) => {
        console.error("Error loading script:", error);
      };

      grnhseAppDiv.appendChild(script);

      return () => {
        grnhseAppDiv.removeChild(script);
        console.log("Container cleared", grnhseAppDiv);
      };
    }
  }, []);
  return (
    <>
      <section className="h-full min-h-[40rem] rounded-card bg-primary">
        <Container>
          <article>
            <div id="script"></div>
          </article>
        </Container>
      </section>
    </>
  );
};

`

I’ve tried using Script component of nextjs but the same result only runs once