react-i18next translation is not working for passed on Prop elements

Question

I have setup an i18 translator in my project, while it is working fine for other elements in the project, it does not seem to work well with passed on prop elements.

This is how I am using the i18:

import { useTranslation } from 'react-i18next';
const { t } = useTranslation();

//Using the translations
{t('kitchenware')} // <-- Working fine
{t(product?.name)} // <-- Error here
name={t(product.name)} // <-- No error, but translations doesn't seem to work

This is the error message that I am getting:

src/pages/product/index.tsx:48:33
TS2769: No overload matches this call.
  Overload 1 of 2, '(key: string | TemplateStringsArray | (string | TemplateStringsArray)[], options?: string | TOptions<StringMap> | undefined): TFunctionResult', gave the following error.
    Argument of type 'string | undefined' is not assignable to parameter of type 'string | TemplateStringsArray | (string | TemplateStringsArray)[]'.
      Type 'undefined' is not assignable to type 'string | TemplateStringsArray | (string | TemplateStringsArray)[]'.
  Overload 2 of 2, '(key: string | TemplateStringsArray | (string | TemplateStringsArray)[], defaultValue?: string | undefined, options?: string | TOptions<StringMap> | undefined): TFunctionResult', gave the following error.
    Argument of type 'string | undefined' is not assignable to parameter of type 'string | TemplateStringsArray | (string | TemplateStringsArray)[]'.

I will be making sure that always a product value is passed, not undefined or null.

Answer 1

I wrongly referencing the i18 scripts. This has worked after a correct reference.