I wanted to organize better the language translation files of my project having to nest objects in the language file.

• Without nesting everything works fine
• Even nesting objects I can access them by passing the attribute directory in the t() function (ie: t('section.subsection.text')
• Documentation's solution doesn't work for me and I don't know why

I already tried printing the useTranslation instance to see if it was receiving the "keyPrefix" value but it always says 'undefined' either on the t or the fixedT function.

lang file is like this:

export const en = {
  section:{
    subsection:{
      text:'my text',
    }
  }
}

the file where I use the useTranslation hook:

const { t } = useTranslation('section', { keyPrefix: 'subsection' });

<h1>{t('text')}</h1>

this is taken from the documentation

// having resources like this:
/*{
  "translation": {
    "very": {
      "deeply": {
        "nested": {
          "key": "here"
        }
      }
    }
  }
}*/
// you can define a keyPrefix to be used for the resulting t function
const { t } = useTranslation('translation', { keyPrefix: 'very.deeply.nested' });
const text = t('key'); // "here"