Не меняются языки в i18n React

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from "react";
import { useTranslation, Trans } from "react-i18next";
// Link
import { Link } from "react-scroll";

const Nav_Links = () => {
  const { t, i18n } = useTranslation();

  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };

  return (
    <div className="nav-links-mobile">
      <span className="mobile-separator"></span>
      <a className="main-link-mobile" href="/">
        Главная
      </a>
      <a
        className="verification-mobile-link"
        href="http://ppk365.com/jinsaiyaoye/"
        target="_blank"
      >
        Проверка на подлинность
      </a>
      <Link to="contact-screen" smooth={true} className="contact-with-us-mob">
        Связаться с нами
      </Link>
      <div className="language-buttons">
        {" "}
        <span
          onClick={() => changeLanguage("ru")}
          className="fi fi-ru fi"
        ></span>
        <span
          onClick={() => changeLanguage("us")}
          className="fi fi-us fi"
        ></span>
        <span
          onClick={() => changeLanguage("kz")}
          className="fi fi-kz fi"
        ></span>
      </div>
    </div>
  );
};

export default Nav_Links;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";



i18n
  // .use(Backend)
  .use(I18nextBrowserLanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: {
      en: {
        mainHeading: {
          key: "Lorem ipsum dolor sit amet",
        },

      },

      ru: {
        mainHeading: {
          key: "Значимость этих проблем настолько",
        }
      },

      kz: {
        mainHeading: {
          key: "Бұл проблемалардың маңыздылығы",
      }
    },

    interpolation: {
      escapeValue: false, // react already safes from xss
    },

  });

export default i18n;