react-i18next: Type errors when doing interpolation in react-typescript/simple

🐛 Bug Report

Using the simple react-typescript example and introducing a variable to interpolate in the translation file causes Type instantiation is excessively deep and possibly infinite. or 'TFunctionDetailedResult<never>' is not assignable to type 'ReactI18NextChild | Iterable<ReactI18NextChild>'. Property '[Symbol.iterator]' is missing in type 'TFunctionDetailedResult<never>' but required in type 'Iterable<ReactI18NextChild>' to be raised

To Reproduce

Using the simple react-typescript example in this repo, introduce a variable in the translation file

{
  "title": "Welcome to react using react-i18next fully type-safe",
  "description": {
    "part1": "This is a simple example. {{hello}}",
    "part2": "😉"
  }
}

then in app.tsx try accessing description.part1 using the t function derived from useTranslation.

<p>{t('description.part1', {hello: 'string'})}</p>

or

<p>{t('translation:description.part1', {hello: 'string'})}</p>

respectively.

See this commit https://github.com/adr29truck/react-i18next/commit/24a615a6bc1b56b133e06cefdf21662efc7e4d82 on fork

Expected behavior

It should not raise type errors.

Your Environment

• runtime version: node v16.13.0, chrome
• i18next version: ^22.4.3
• react-i18next version: ^12.1.1
• os: Mac