react-i18next: strings not being translated - reactjs

Question

I had a frustrating problem with the react-i18next library. I just couldn't get the library to translate the strings in my app.
The code was as follows:
App.tsx:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import resources from './resources';
// code omitted...
i18n
.use(initReactI18next)
.init({
resources,
lng: 'en',
interpolation: {
escapeValue: false,
},
});
// rest of the code here...
resources/index.tsx:
export default {
en: {
'Math Visualized': 'Math Visualized asd',
},
fi: {
'Math Visualized': 'Matematiikan visualisointia',
},
};
components/header/Header.tsx:
import { withTranslation } from 'react-i18next';
// code omitted...
class HeaderComponent extends React.Component<Props, State> {
render() {
const { headerText, subheaderText, t } = this.props;
// react-bootstrap used here
return (
<Navbar bg="dark" variant="dark">
<Navbar.Brand>{t(headerText)}</Navbar.Brand>
{subheaderText && <Navbar.Text>{t(subheaderText)}</Navbar.Text>}
</Navbar>
);
}
}
export const Header = withTranslation()(HeaderComponent);
The header and subheader text strings simply refused to be translated.

Answer 1

I had simply forgotten to add the translation namespace to the resources file. I modified it like this:
export default {
en: {
translation: { // THIS NAMESPACE HERE WAS MISSING
'Math Visualized': 'Math Visualized asd',
},
},
fi: {
translation: {
'Math Visualized': 'Matematiikan visualisointia',
},
},
};
And everything worked.