External javascript scripts no longer run after switching React pages

Question

I have a React application that I need to externally script into a page called Events. These scripts are a file and strings of code (I had to add window before dw otherwise react gave me error for undefined variable).

I used a useScript hook inside the page component to load the script and it works fine until I change pages. If I change page and then return to Events, the page stays blank and the script doesn't create its content... to see it, I have to refresh the browser.

Hook component:

const useScript = url => {
   useEffect(() => {
      const script = document.createElement('script');
      script.src = url;
      script.async = true;
      document.body.appendChild(script);
    
      return () => document.body.removeChild(script);
   }, [url]);
};

Events page component:

function Events() {
   const { t } = useTranslation();

   useEffect(() => {
      window.dw = window.dw || function () { (window.dw.q = window.dw.q || []).push(arguments) };
      window.dw('settings', api_code,
      {
         "context": {"targetRoute":["/eventi","/events","/veranstaltungen"]},

         "lang": document.cookie.split('; ').find((row) => row.startsWith('i18next='))?.split('=')[1],

         "target": "tosc5container",

         "loadingAnimationColor": {
         "main": '#999999',
         "alt": '#B9E0AF'
         }
      });
      window.dw('onPageChange', api_code);
   }, []);

   useScript('https://resc.deskline.net/DW5/start/TERRBRENTA/api_code/index.js')

   return (
      <section className="container pt-6 pb-6">
         <Helmet>
            <title>{t('navbar.events')}</title>
            <meta  name="description" content={t('pageDesc.events')} />   
         </Helmet>
         
         <h1 className="pb-2">{t('navbar.events')}</h1>
         <p className="pb-2">{t('evt')}</p>
         
         <div id="tosc5container" style={{ minHeight: "250px" }} />
      </section>
   );
}

Routes:

function App() {
  const location = useLocation();
        useEffect(() => window.scrollTo(0, 0), [location]);

  return (
    <main>
       <Routes location={location} key={location.key}>
          <Route path="/" element={<Home />} />
          <Route path="service" element={<Service />} />
          <Route path="events" element={<Events />} />
          <Route path="contact" element={<Contact />} />
          <Route path='/*' element={<ErrorPage />} />
       </Routes>
    </main>
  );
}

Navbar for page turning:

<nav>
    <ul className="flex g-2">
       <li><Link to="/">Home</Link></li>
       <li><Link to="service">{t('navbar.service')}</Link></li>
       <li><Link to="events">{t('navbar.events')}</Link></li>
       <li><Link to="contact">{t('navbar.contact')}</Link></li>
       <li>
          <button onClick={handleChangeLang}>
             <b>{currentLangCode === 'it' ? 'EN' : 'IT'}</b>
          </button>
       </li>
    </ul>
</nav>

I've searched and tried everything and can't figure out how to fix. Can someone help me ?

Thanks!