reactjs - Reactフォームで検証制約を変換する方法はありますか?

Question

国際化のために react-i18next を使用していますが、React フォームの検証制約を変換する組み込みの方法が見つかりません。フォームのメッセージの言語はブラウザーの言語に依存し、ユーザーがサイトで別の言語を使用することを選択しても変更されません。

スクリーンショットの例- ページは英語ですが、制約メッセージはオランダ語のままです。

検証制約のメッセージを翻訳用の言語 Cookie に依存させる方法はありますか? それとも、react-i18next で翻訳することは可能でしょうか?

i18n.js:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';

const resources = {
  en: {
    translation: {
      "Name": "Name",
      "Count": "Count",
      "New object": "New object",
      ...,
    }
  },
  nl: {
    translation: {
      "Name": "Naam",
      "Count": "Telling",
      "New object": "Nieuw object",
      ...,
    }
  }
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    fallbackLng: "en",
    debug: false,

    keySeparator: false,

    interpolation: {
      escapeValue: false
    },
    detection: {
      // order and from where user language should be detected
      order: ['cookie', 'querystring', 'localStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],

      // keys or params to lookup language from
      lookupQuerystring: 'lng',
      lookupCookie: 'language',
      lookupLocalStorage: 'i18nextLng',
      lookupFromPathIndex: 0,
      lookupFromSubdomainIndex: 0,

      // cache user language on
      caches: ['localStorage', 'cookie'],
      excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)

      // optional expire and domain for set cookie
      cookieMinutes: 10,
      cookieDomain: 'myDomain',

      // optional htmlTag with lang attribute, the default is:
      htmlTag: document.documentElement
    }
  });

反応フォーム:

handleChange = (event) =>  {
    const name = event.target.name;
    const value = event.target.value;
    this.setState(prevstate => {
      const newState = { ...prevstate };
      newState[name] = value;
      return newState;
    });
  } 

render() {
   const { t } = this.props;
   return (
     <>
        <form onSubmit={(e) => this.newObjectHandler(e)}>
          <p>
              <label htmlFor="name">{t("Name")}: </label>
              <input
                type="text"
                name="name"
                minLength="6"
                maxLength="40"
                value={this.state.name}
                onChange={this.handleChange}
                required
              />
          </p>
          <p>
              <label htmlFor="count">{t("Count")}: </label>
              <input
                type="number"
                name="count"
                min="0"
                max="100"
                step="1"
                value={this.state.count}
                onChange={this.handleChange}
                required
              />
          </p>
          <p>
          <input type="submit" value={t("New object")} />
          </p>
        </form>
     </>
   )
 }