Error: 'ssv_mode is already declared' when using Swirl script on multiple pages in a React application

Question

I'm integrating the Swirl service into my React web application, and I'm encountering an issue when navigating between different pages. The error message I'm getting is: "ssv_mode is already declared." It seems to be related to the Swirl script being loaded twice, and I'm not sure how to resolve this issue.

Here's how I'm currently including the Swirl script in my application:

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://apigoswirl.com/short_video/v12/short-video.min.js';
  script.className = 'apigoswirl';
  script.async = true;

  const loadExternalScript = () => {
    if (!document.querySelector('.apigoswirl')) document.body.appendChild(script);
  };

  const checkForDiv = () => {
    if (
      document.querySelector('#swirl-short-videos') != null ||
      localStorage.getItem('_ssv_pip')
    ) {
      loadExternalScript();
    } else {
      setTimeout(checkForDiv, 100);
    }
  };

  checkForDiv();

  return () => {
    const scrp = document?.getElementsByClassName('apigoswirl');
    for (let i = 0; i < scrp.length; i++) {
      scrp[i].remove();
    }
  };
}, []);

const bannerData = JSON.parse(banner?.product_ids.replace(`'`, `"`) || {});

return (
<div
        className=''
        id='swirl-short-videos'
        data-code={bannerData?.data.data_code}
        data-wt='5'
        data-playlist={bannerData?.data.data_playlist}
        data-pdp='product/,products/'
        data-playlist-name={bannerData?.data.data_playlist_name}
      />
    </div>
)

I suspect that the issue is related to the Swirl script being loaded on the initial page and not properly cleaned up when navigating to a different page. How can I ensure that the script is loaded only once and avoid conflicts when switching between pages in my React application?

Any guidance or suggestions would be greatly appreciated. Thank you