Is there away to pass all variable to all children components

// i18n.ts file
export default {
  en: { key: 'value' },
  vi: { key: 'giá trị' },
}

// i18n.ts file
export default {
  en: { key: 'value' },
  vi: { key: 'giá trị' },
}

import t from 'i18n.ts'
import Child from 'Child.ts'

// Component Parent
export default function() {
  const locale = 'vi'
  return (
    <main>
      <h1>{t[locale].key}</h1>
      <Child/>
    </main>
  )
}

import t from 'i18n.ts'
import Child from 'Child.ts'

// Component Parent
export default function() {
  const locale = 'vi'
  return (
    <main>
      <h1>{t[locale].key}</h1>
      <Child/>
    </main>
  )
}

import Grandchild from 'Grandchild.ts'

// Component Child
export default function() {
  return (
    <Grandchild />
    <Grandchild />
    <Grandchild />
  )
}

import Grandchild from 'Grandchild.ts'

// Component Child
export default function() {
  return (
    <Grandchild />
    <Grandchild />
    <Grandchild />
  )
}

import t from 'i18n.ts'

// Component Grandchild
export default function() {
  const locale = 'vi' // it would be good if I can get this from Parent without passing through property
  return <p>{t[locale].key}</p>
}

import t from 'i18n.ts'

// Component Grandchild
export default function() {
  const locale = 'vi' // it would be good if I can get this from Parent without passing through property
  return <p>{t[locale].key}</p>
}