Translating strings outside react components using react-18next

a lot of tutorials and articles that show how to add i18n to react applications using react-18next, have the translatable strings inside the components. Why does it seem like its an accepted convention yet this could potentially lead to code duplication and prove to be a maintenance nightmare for a sufficiently large codebase.

• Are there patterns that in react-js ecosystem that can help one organize such translatable strings much better, bearing in mind that they should be reactive to run-time language changes by the user on the browser.
• Would the solution work where some of the strings have to be defined outside the components, e.g though contrived

// utils
export const lookup = {
  key1: {
    title: 'lorem Ipsum', // values should be translated
    description: 'a somehwat long description',
    severalOtherProps: 'and their values',
  },
  // ... several keys here.
  lastkey: {
    title: ' lorem Ipsum',
    description: 'a somehwat long description',
    severalOtherProps: 'and their values',
  },
};

// component1.tsx

export const component1 = () => {
  // consumes lookup
};

export const component2 = () => {
  // consumes lookup
}