Next.js App Router集成谷歌翻译组件跳转页面时出现空白及removeChild错误的问题求助

我最近在Next.js（使用App Router）项目里集成谷歌翻译下拉组件，组件本身已经能正常加载使用了，但遇到一个棘手的问题：当我从包含这个翻译组件的页面跳转到没有该组件的页面时，目标页面直接变成空白，控制台还抛出了这个错误：
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

我试着不清理组件来让脚本持久化，但这个方法似乎没起作用。

这是我的谷歌翻译组件代码：

"use client";
  
import { useEffect } from "react";
  

const GoogleTranslate = () => {
  
  useEffect(() => {
  
    // Load the Google Translate script
    const script = document.createElement("script");
    script.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
    script.async = true;
    document.body.appendChild(script);
  
    // Initialize the Google Translate element
    window.googleTranslateElementInit = () => {
      new window.google.translate.TranslateElement(
        { pageLanguage: "en" },
        "google_translate_element"
      );
    };
  
  }, []);
  
  return <div id="google_translate_element"></div>;
};

export default GoogleTranslate;

我把这个组件放在应用的Header里使用，代码大概是这样：

<AppBox>
  <GoogleTranslate />
</AppBox>

备注：内容来源于stack exchange，提问作者Selvakumar Sekar