Ecwid Store in React with React Router

I'm struggling with a problem that is driving me crazy.

I have an Ecwid store and there is a way to implement the store in your own website with some script, this website that I'm making is in React I found a solution on Reddit (https://www.reddit.com/r/reactjs/comments/fwaam2/running_scripts_in_jsx_and_functions_defined_by/fuxbqr1/) to integrate the external script into my React component and it works, but then I implemented React-Router to the website and I came to another problem: the store page loads the first time the whole website loads but when I navigate through the website and then go back to the store, it does not load anymore, I searched over StackOverflow for similar problems but all the answers didn't work for me.

I came to the conclusion that there is something wrong with the script that cant be loaded multiple times until I refresh the entire website, I attach the code of the whole store component if anyone experienced this problem with Ecwid integration in react or something like this and find a way to make it work please help :D

import {useEffect, useRef} from 'react';

function Products() {

const storeDiv = useRef(null);
const scriptRef = useRef(null);

window.localStorage.setItem("show_ecwid_logs","true")
window.ecwid_script_defer = true;
window.ecwid_dynamic_widgets = true;
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.enable_catalog_on_one_page = true;
window._xnext_initialization_scripts = [{
  widgetType: 'ProductBrowser',
  id: 'my-store-51363006',
  arg: ["id=productBrowser", "views=grid(20,3)"]  },
  {
    widgetType: 'CategoriesV2',
    id: 'my-categories-51363006',
    arg: ["id=categoriesV2"]
  }
  ,
  {
    widgetType: 'SearchWidget',
    id: 'my-search-51363006',
    arg: ["id=searchWidget"]
  }
];



let script = document.createElement('script');
script.type = 'text/javascript';
script.src = ('https://app.ecwid.com/script.js?51363006&data_platform=code&data_date=2021- 
03-10');
script.defer = true;
script.ref=scriptRef;

useEffect(() => {
if(!scriptRef.current){
  storeDiv.current.appendChild(script);
   }
});

return (
  <div className="store">
        <div id="my-search-51363006"></div>
        <div id="my-categories-51363006"></div>
        <div id="my-store-51363006" ref={storeDiv}></div>
        <div className="ec-cart-widget"></div>
  </div>

  );
}

export default Products;