how to not duplicate react i18next in each component

Question

i start to use I18next to my react app. - > https://react.i18next.com/latest/using-with-hooks

i using with theyre hook {useTranslation}

but the problem and annoing situation is that i need to write it over and over again in every component:

import { useTranslation } from "react-i18next";//////////////this
 const example = () => {
const { t, i18n } = useTranslation();////////////////// and this
return (
    <>
        <p>{t("Thanks.1")}</p>

its look weird that this is the way to implement it, there is a way to declare it globally and just reuse it in all my app?

Answer 1

export const ExampleComponent_2 = ({t}) => {
 return (
   <p>{t("Thanks.2")}</p>
    )
  }


export const ExampleComponent_2 = ({t}) => {
 return (
   <p>{t("Thanks.1")}</p>
   )
 }

in top container use it

import { useTranslation } from "react-i18next";

export const App = ({ t }) => {
  return (
  <ExampleComponent_1 t={t}/>
  <ExampleComponent_2 t={t}/>
 )
}