I'm using React and Google Translation api together. And there was a problem

The following code exists in app.js: It works well.

 const googleTranslateElementInit = () => {
        new window.google.translate.TranslateElement({ pageLanguage: 'ko,en,vi', layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE, }, 'google_translate_element');
 }
 useEffect(() => {
        const addScript = document.createElement('script');
        addScript.setAttribute('src', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
        document.body.appendChild(addScript);
        window.googleTranslateElementInit = googleTranslateElementInit;
 }, []);

However, when I access a specific page, I can't see the screen and show the following errors.

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

The above error occurred in the <i> component:

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

I know roughly what this means. But I don't know what to do. Please help me out..