I'm trying to implement Google Translate in my Next.js app, but I'm encountering an issue where the dropdown element is not found even after multiple attempts.

Error Message: Google Translate dropdown not found after multiple attempts. src\\app\\layout.js (73:19) @ eval

ty"use client";
import React, { useEffect, useState } from "react";
import "./globals.css";

const GlobeIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns=";>
    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="2"/>
    <path d="M8 3H9C7 7 7 17 9 21H8" stroke="currentColor" strokeWidth="2"/>
    <path d="M15 3C17 7 17 17 15 21" stroke="currentColor" strokeWidth="2"/>
    <path d="M3 16V15C7 17 17 17 21 15V16" stroke="currentColor" strokeWidth="2"/>
    <path d="M3 9C7 7 17 7 21 9" stroke="currentColor" strokeWidth="2"/>
  </svg>
);

const ChevronIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
  </svg>
);

export default function RootLayout({ children }) {
  const [currentLang, setCurrentLang] = useState("en");
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  useEffect(() => {
    // Define the Google Translate initialization function
    window.googleTranslateElementInit = () => {
      try {
        new window.google.translate.TranslateElement(
          {
            pageLanguage: "en",
            includedLanguages: "en,es,de,pt",
            autoDisplay: false,
            layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
          },
          "google_translate_element"
        );
        console.log("✅ Google Translate initialized successfully.");
      } catch (error) {
        console.error("❌ Error initializing Google Translate:", error);
      }
    };

    // Inject the Google Translate script
    const script = document.createElement("script");
    script.src = ".js?cb=googleTranslateElementInit";
    script.async = true;
    script.onload = () => console.log("✅ Google Translate script loaded.");
    script.onerror = () => console.error("❌ Google Translate script failed to load.");
    document.body.appendChild(script);

    return () => {
      console.log("