reactjs - react-i18next で Translation を正しく待つ方法

Question

反応アプリ全体で翻訳をロードするために、react-18next を使用しています。アプリを翻訳待ちにするのに問題があります。多くの場合、翻訳されたキーを検索しているため、Jenkins でのテストが中断されます。

i18n.tsx:

i18n
.use(initReactI18next)
.init({
  resources, // set ressources to be used
  lng: "en", // set default language
  keySeparator: false, 
  interpolation: {
    escapeValue: false
  },
  react: {
    useSuspense: false,
  }
});

注: サスペンスを使用する場合と使用しない場合の両方を試してみましたが、useSuspense フラグは試行と一致していました (サスペンスの true/default)。

準備完了で試行:

const SiteLabel: React.FunctionComponent<ISiteLabelProps> = (props) => {
  const { t, ready } = useTranslation(undefined, {
    useSuspense: false
  });

  const getTo = (): string => {
    return "/" + props.module.toLowerCase();
  }

  const getLabel = (): string => {
    return props.module.toLowerCase() + ":GEN_PAGETITLE";
  }

  if(!ready)
    return (<div>Loading Content...</div>);

  return (
      <ConfirmLink
        content={t(getLabel())}
        dirty={props.dirty}
        setDirty={props.setDirty}
        className={Styles.label + " id-btn-riskshield"}
        to={getTo()}
        toState={null}
      />
  );
}

export default SiteLabel;

サスペンスの試み:

const SiteLabel: React.FunctionComponent<ISiteLabelProps> = (props) => {
  const { t } = useTranslation();

  const getTo = (): string => {
    return "/" + props.module.toLowerCase();
  }

  const getLabel = (): string => {
    return props.module.toLowerCase() + ":GEN_PAGETITLE";
  }
    
  return (
      <Suspense fallback={<div>Loading...</div>}
      <ConfirmLink
        content={t(getLabel())}
        dirty={props.dirty}
        setDirty={props.setDirty}
        className={Styles.label + " id-btn-riskshield"}
        to={getTo()}
        toState={null}
      />
      </Suspense>
  );
}

export default SiteLabel;

どちらのバージョンも機能しないようです。翻訳キーが一瞬表示されます。次のプロップに渡されるのではなく、実際に翻訳が書き出されるポイントまで、さらに深く掘り下げる必要がありますか?それとも、コミットしているエラーは何ですか? 構築/展開に next.js を使用していません。app.tsx でグローバル ソリューションを使用したいと思います。