سؤال بخصوص ترجمة موقع react باستخدام react i18next

import React, { useRef, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import i18next from "i18next";
import cookies from "js-cookie";

 const [isMenu, setIsMenu] = useState(false);


  const languages = [
    {
      code: "en",
      name: "English",
      country_code: "us",
    },
    {
      code: "ar",
      name: "العربية",
      dir: "rtl",
      country_code: "sa",
    },
  ];


  const currentLanguageCode = cookies.get("i18next") || "en";


  const currentLanguage = languages.find((l) => l.code === currentLanguageCode);


  const { t } = useTranslation();


  useEffect(() => {
    document.body.dir = currentLanguage.dir || "ltr";
  }, [currentLanguage]);

//dropdown
<div className="big_container">
            <span className="icon_span" onClick={() => setIsMenu(!isMenu)}>
              <i className="ri-global-line"></i>
            </span>
            {isMenu && (
              <div className="small_container">
                <p className="language_p">{t("language")}</p>
                {languages.map(({ code, name, country_code }) => (
                  <p key={country_code} className="language_item">
                    <button
                      className="language_item-btn"
                      onClick={() => {
                        return [i18next.changeLanguage(code), setIsMenu(false)];
                      }}
                      disabled={code === currentLanguageCode}
                    >
                      {name}
                    </button>
                  </p>
                ))}
              </div>
            )}
          </div>