Toggle Language dropdown - error in handling language change

Question

I wanted to see if anyone can help me out 1) figuring out why my component is not handling the language chage state 2) how can I apply this change into actually changing the language for a whole app. What is the best approach for production?

I spent a lot of time styling this element so I would love to actually have it's function working in the best way possible.

Cheers!

Reference Code:

import React, { useState, useEffect } from 'react';
import ukFlag from '../assets/ukFlag.png';
import spainFlag from '../assets/spainFlag.png';

const NavbarLanguageDropdown = () => {
  const [language, setLanguage] = useState('English');
  const [dropdownOpen, setDropdownOpen] = useState(false);



  const handleLanguageChange = (e) => {
    setLanguage(e.target.value);
  };
  
  const toggleDropdown = () => {
    setDropdownOpen(!dropdownOpen);
  };

  useEffect(() => {
    // update document language attribute when language changes
    document.documentElement.lang = language.toLowerCase();
  }, [language]);


  return (
    <div className="relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="flex justify-between items-center py-6 md:justify-start md:space-x-10 hover:font-bold uppercase">
          <nav className="hidden md:flex space-x-10">
            <div className="relative">
              <div className="group inline-flex items-center">
                <button
                  className="flex items-center focus:outline-none"
                  onClick={toggleDropdown}
                  onBlur={() => setDropdownOpen(false)}
                >
                  {language === 'English' && (
                    <img src={ukFlag} alt="English Flag" className="w-4 h-4 mr-2" />
                  )}
                  {language === 'Spanish' && (
                    <img src={spainFlag} alt="Spanish Flag" className="w-4 h-4 mr-2" />
                  )}
                  <span className="text-gray-500 cursor-pointer">
                    {language}
                  </span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-4 w-4 ml-2"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      fillRule="evenodd"
                      d="M10 13a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4A1 1 0 0110 13z"
                      clipRule="evenodd"
                    />
                  </svg>
                </button>
                {dropdownOpen && (
                  <div className="absolute z-10 top-full w-48 mt-2 py-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                    <button
                      className="flex items-center w-full text-left px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none"
                      onClick={handleLanguageChange}
                      value="English"
                    >
                      <img src={ukFlag} alt="English Flag" className="w-4 h-4 mr-2" />
                      English
                    </button>
                    <button
                      className="flex items-center w-full text-left px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none"
                      onClick={handleLanguageChange}
                      value="Spanish"
                    >
                      <img src={spainFlag} alt="Spanish Flag" className="w-4 h-4 mr-2" />
                      Español
                    </button>
                  </div>
                )}
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>





 );
};

export default NavbarLanguageDropdown

I have tried using local storage in this way without succes:

 useEffect(() => {
    // get the language from local storage or set the default to English or Spanish depending on the users option choice
    const storedLanguage = localStorage.getItem('language');
    if (storedLanguage && (storedLanguage === 'English' || storedLanguage === 'Spanish')) {
      setLanguage(storedLanguage);
    } else {
      setLanguage('Spanish'); // set default to Spanish
    }
  }, []);