I'm using a package called react-i18nextand I have created json file for the languages but when I'd use them I instantly get a hydration error. I have created the spanish and english version of the app, the hydration error related that the Server has rendered the English version of some text but the client rendered Inicio which is Home in spanish, I have no idea how to fix this error. Can someone help me?

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import enTranslation from "./jsons/english.json";
import esTranslation from "./jsons/spanish.json";

const resources = {
  en: {
    translation: enTranslation,
  },
  es: {
    translation: esTranslation,
  },
};

const i18nInstance = i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: "en",
    detection: {
      order: ["localStorage", "navigator"],
      caches: ["localStorage"],
    },
    interpolation: {
      escapeValue: false,
    },
  });

export default i18nInstance;