How to use the Trans component for bold or italicized text in the middle of a translation

This has been asked before, but I'm not able to comment on existing posts due to lacking reputation points so I am creating my own question.

I have a hard time understanding how to use the Trans component properly, as I find its documentation page to be a bit lacking and unclear.

I am trying to use nested bold or italicized text in my JSON strings. For context, I have translation file called "homepage.json" which I am keeping in my React app's public/locales/en/ subdirectory, using a format as follows:

{
"main": {
    "paragraph-text": "Lorem ipsum dolor sit, <1>amet consectetur adipisicing elit</1>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus."
    }
}

My Trans component looks like this:

<Trans i18nKey={"homepage.main.paragraph-text"}>
    Lorem ipsum dolor sit, <em>amet consectetur adipisicing elit</em>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus.
</Trans>

When I try to create a French translation file for homepage.json, under public/locales/fr/ while using the exact same format as its English counterpart, when toggling between languages the library is not making use of the French text.

This answer seems to describe exactly what I want to achieve, and I have attempted to implement the outlined solution into my application, but my Trans component instance does not appear to be able to locate the i18nkey value I pass to it.

Solution

Solved the issue. The problem is that I wasn't passing in the namespace of my translation file correctly to the Trans component.

As per my example above, the correct way to use Trans would be:

const { t } = useTranslation('myNamespace')
<Trans t={t} i18nKey={"main.paragraph-text"}>
    Lorem ipsum dolor sit, <em>amet consectetur adipisicing elit</em>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus.
</Trans>

Along with the correct usage in the JSON file:

{
"main": {
    "paragraph-text": "Lorem ipsum dolor sit, <0>amet consectetur adipisicing elit</0>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus."
    }
}