reactjs - フックを使用してreact i18nextで「フォールバックUIが指定されていません」を修正する方法

Question

useTranslation フックを使用して、反応コンポーネントに i18next を実装しようとしていますが、次のように言い続けています。

不明なエラー: レンダリング中にテストが中断されましたが、フォールバック UI が指定されていませんでした。

<Suspense fallback=...>ツリーの上位にコンポーネントを追加して、表示するロード インジケーターまたはプレースホルダーを提供します。

<Suspense>私が持っているものよりも高いものを追加するにはどうすればよいですか? 私は何を間違っていますか？これを修正するにはどうすればよいですか? <Translation>コンポーネントを使用すると問題なく動作するようです。当然、サスペンスをオフにして自分で処理しようとしてもうまくいきそうですが、それでは目的が果たせないのではないかと思います。これを実際に機能させるにはどうすればよいですか？Fetch バックエンドの構成が間違っていますか?

Test.js

import React, { Suspense, useState, useEffect, lazy } from "react";
import PropTypes from "prop-types";

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

export default function Test( props ){
  const { t, i18n } = useTranslation( 'bingo_game' );

    return (
    <Suspense fallback={<div>Loading...</div>}>
      <div>
        Pant leg
      </div>
    </Suspense>
    )
}

Test.propTypes = {
  token: PropTypes.string.isRequired,
};

と

i18n.js

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

import Fetch from "i18next-fetch-backend";

  i18n
    .use(LngDetector) //language detector
    .use(Fetch)
    .use(initReactI18next)
    .init({
      backend: {
        loadPath: "/infra/locales/{{ns}}.json",
        // path to post missing resources
        addPath: "locales/add/{{ns}}",
        // define how to stringify the data when adding missing resources
        stringify: JSON.stringify
      },
      defaultNS: "base",
      fallbackLng: "en",
      debug: true,
      initImmediate: false
    });

export default i18n;

私が見つけたドキュメントと、私の問題ではないこの SO 投稿を調べました。