React i18next produces "text content doesn't match server-rendered html" error

Question

I'm trying to properly implement i18next for my react project. But since I'm using the translations in my components, I get the error: text content does not match server-rendered html. In general everything works finde and I get the correct translations and can switch the languages. Just the error, I don't know how to fix. I had a look on almost every similar problems, but no solution seams to work.

My i18n.ts file looks like this:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

import translations_de_DE from '../../public/locales/de_DE/translation.json';
import translations_en_US from '../../public/locales/en_US/translation.json';

const resources = {
  // later we can fetch them from remote or so
  de_DE: { translation: translations_de_DE },
  en_US: { translation: translations_en_US },
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .use(LanguageDetector)
  .use(Backend)
  .init({
    resources,
    // lng: "de_DE",
    fallbackLng: 'de_DE',
    keySeparator: false, // we do not use keys in form messages.welcome
    interpolation: { escapeValue: false }, // react already safes from xss
  });

export default i18n;

My index.tsx (in a reduced way):

import './i18n';
import { useTranslation } from 'next-i18next';

const Home = () => {
  const { t } = useTranslation();

  return (
          <div>
            {t<string>('project_plural')}
          </div>
  );
};
export default Home;

My Settings.tsx (where users can change the language):

import React, { Suspense, useEffect, useState } from 'react';
import i18n from 'i18next';
import { useTranslation } from 'next-i18next';

const Settings = () => {
  const { t } = useTranslation();
  const [language, setLanguage] = useState('');

  const changeLanugage = (event: any) => {
    i18n.changeLanguage(event.target.value);
    setLanguage(event.target.value);
  };

  useEffect(() => {
    if (currentTheme === 'dark') {
      setDarkMode(true);
    }
    const localLanguage = localStorage.getItem('i18nextLng');
    setLanguage(localLanguage ? localLanguage : 'de_DE');
  }, []);

  return (
        <select
          value={language}
          onChange={changeLanugage}
        >
          <option value="en_US">English</option>
          <option value="de_DE">Deutsch</option>
        </select>
  );
};

export default Settings;