Google translate website refer https://stackoverflow.com/a/77475162/17424201

app.tsx

export default App() {
  useGoogleTranslate()

  return (
    <>
       <div key="GoogleTranslate" id="google_translate_element" />
    </>
  )
}

style.css

/* If you want to hide the toolbar */
body div.skiptranslate iframe {
  display: none;
}

useGoogleTranslateScript.ts

declare global {
  interface Window {
    google: {
      translate: {
        // TranslateElement: ObjectConstructor
        TranslateElement: any
      }
    }
  }
}

function useGoogleTranslate(elementId = 'google_translate_element') {
  const googleTranslateElementInit = () => {
    new window.google.translate.TranslateElement(
      {
        pageLanguage: 'en',
        includedLanguages: 'zh-TW,zh-CN,en',
        layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
      },
      elementId,
    )
  }

  Object.assign(window, {
    [googleTranslateElementInit.name]: googleTranslateElementInit,
  })

  useEffect(() => {
    const addScript = document.createElement('script')
    addScript.setAttribute(
      'src',
      `//translate.google.com/translate_a/element.js?cb=${googleTranslateElementInit.name}`,
    )
    document.body.append(addScript)
  }, [])
}