How to use Google Translate widget in Next.js + TypeScript?

Question

The more complex our tech-stack gets, the harder it is to find solutions online. Or at least that's what I believe and experiencing right now. I'm using Next.js with Typescript and want to use google translate like this from w3shools. I have found and implemented this solution but errors because of Typescript. Referring from the code below, it shows squiggly lines on new window.google.translate.TranslateElement and window.googleTranslateElementInit

import React, { useEffect } from "react";
import styles from "./index.module.css";
const BotBar: React.FC = () => {
  const googleTranslateElementInit = () => {
        new window.google.translate.TranslateElement(
            {
                pageLanguage: "en",
                autoDisplay: false,
            },
            "google_translate_element"
        );
    };
    useEffect(() => {
        var addScript = document.createElement("script");
        addScript.setAttribute(
            "src",
            "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        );
        document.body.appendChild(addScript);
        window.googleTranslateElementInit = googleTranslateElementInit;
    }, []);
    return <div className={styles.outerBotBar}>Botbar</div>;
};

export default BotBar;