无需刷新页面实现React集成谷歌翻译的方案求助

各位好，我最近摸索着把谷歌翻译集成到了React项目中，用的是下面这段不需要API密钥的免费脚本，用起来特别省心：

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async></script>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement(
    {
      pageLanguage: "en",
      layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
    },
    "google_translate_element"
  );
}
</script>

不过一开始遇到了三个问题，我已经搞定其中两个：

• 第一个是谷歌翻译自带的固定语言栏和我的项目UI风格不匹配，我直接用CSS把它隐藏了；
• 因为隐藏了官方语言栏，我得自己实现React里的语言切换逻辑，现在已经写出了下面的代码：

// App.js
import { useEffect, useState } from "react";
import Cookies from "universal-cookie";

const App = () => {
  const cookies = Cookies();
  const googtrans = cookies.get("googtrans");
  const languageCode = googtrans.split('/')[2];
  const [code, setCode] = useState(languageCode);

  const setGoogleTrans = () => {
    document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    cookies.set("googtrans", `/en/${code}`, {
      domain: `${window.location.hostname}`,
      path: "/",
    });
    window.location.reload();
  };

  useEffect(()=>{
    setGoogleTrans();
  },[code])

  return (
    <button onClick={() => setCode(code === 'en' ? 'tl' : 'en')}>
      Change language
    </button>
  )
}

现在卡在最后一个问题上：每次切换语言都必须调用window.location.reload()才能让谷歌翻译生效，有没有办法不用刷新页面，设置完googtrans cookie后就能直接触发翻译呢？

备注：内容来源于stack exchange，提问作者Kim Joseph Penaloza