I want to provide a link in the translation. So as per the documentation, I came up with below:

            <Trans
              i18nKey="translation-key"
              components={{
                strong: <strong />,
                link: <a href={pdfLink} aria-label="download csv link" />,
              }}
            />

and the translation json is as below:

{
    translation-key: "Incorrect format. Please use this <strong><link>template</link></strong>."
}

The requirement is to use current template as a link to the actual pdf in S3, which I checked is correct.
But it is rendering the text template outside the a tag as below:

<span>Incorrect format. Please use this <strong><a href="`correct csv link`"></a>template</strong>.</span>

Has anyone faced a problem like this? How can I fix it?

On manually wrapping as below:

            <Trans
              i18nKey="translation-key"
              t={() => (
                <span>
                  {t('translation-key', {
                    link: (
                      <strong>
                        <a href={pdfLink}>
                          template
                        </a>
                      </strong>
                    ),
                  })}
                </span>
              )}
            />

I am getting:

<span>Incorrect format. Please use this [object Object].</span>