Setting different JS SDK by country in a SSR website

[ThisIsMyLastResource]

Currently, I have a Next.js SSR managing two countries.

Each country is handled by folders rather than subdomain:

• example.com/en-US
• example.com/de-CH

Now, for each country I have the a different environment and deploymentId, and when the user changes it's country from the locales dropdown, the chat should be the one on the selected country.

The problem is, i don't reload the page, so the scripts of the selected country are not loaded.

export default ({ children }) => {
  const { locale: lang } = useRouter();
  const country = useMemo(() => /* logic */, [lang]);
  useEffect(() => {
    (async () => {
      await setGenesysScript(genesysCredentialsBy[country]);
      setReady(true);
    })();
  }, [country]);
  return (
    <GenesysContext.Provider value={Genesys}> // injecting Genesys commands
      {children}
    </GenesysContext.Provider>
  );
};

have anyone here came across with something similar, or know how to achieve the expected behavior?