I implement google translate button (google_translate_element) using script tag but it’s working on only one page, other page getting empty div

GOOGLE TRANSLATE embedded in script issue

this is a REACT JS code.
included script tag in index.html
but dont know why it’s just showing the widget only on landing page and not inside any other pages

const [translateStyleObj, setTranslateStyleObj] = useState(forMobile ?
        { position: "absolute", left: "5%", top: "80px", display: "none", zIndex: "99999", backgroundColor: "#000", borderRadius: "10px", padding: "25px" } :
        { position: "absolute", right: "5%", top: "80px", display: "none", zIndex: "99999", backgroundColor: "#d23f99", borderRadius: "10px", padding: "25px" }
    );
    const googleTranslateBox = useRef(null);

    function googleTranslateElementInit() {
        let removeElem = document.getElementById("google_translate_element");
        if (removeElem.childNodes.length === 0) {
            try {
                new window.google.translate.TranslateElement(
                    { pageLanguage: 'en' },
                    'google_translate_element'
                );
            } catch {}}
    }

    useEffect(() => {
        window.googleTranslateElementInit = googleTranslateElementInit;
        var addScript = document.createElement('script');
        addScript.setAttribute('src', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
        addScript.setAttribute('async', 'true');
        addScript.setAttribute('type', 'text/javascript');
        document.body.appendChild(addScript);
    }, [])

 useEffect(() => {
        let handler = (e) => {
            if (googleTranslateBox.current && !googleTranslateBox.current.contains(e.target)) {
                setTranslateStyleObj({ ...translateStyleObj, display: "none" })
            }
        }
        document.addEventListener('mousedown', handler)
        return () => {
            document.removeEventListener('mousedown', handler)
        }
    }, [])

    const handleTranslate = () => translateStyleObj.display === "none" ? setTranslateStyleObj({ ...translateStyleObj, display: "block" }) : setTranslateStyleObj({ ...translateStyleObj, display: "none" });




rendering below

<div className='nav-item' style={{ padding: "10px 15px" }} ref={googleTranslateBox}>
                        <TranslateIcon onClick={handleTranslate} style={{
                            color: '#ffffff',
                            cursor: 'pointer',
                        }} />
                        <div style={translateStyleObj}>
                            <div id="google_translate_element"></div>
                        </div>
                    </div>

as the UI shown its working on one page.
Thank you in advance