useContext-example.tsx

import React, { useState, useContext } from 'react'

export const NameContext = React.createContext()

export const NameContextProvider = ({ children }) => {
    const [name, setName] = useState('Moshood')
    return (
      <NameContext.Provider value={{ name, setName }}>
        {children}
      </NameContext.Provider>
    )
}

function App () {
  return (
    <NameContextProvider>
      <Parent />
    </NameContextProvider>
  )
}
function Parent () {  
  return (
    <FirstLevelChild />
  )
}

function FirstLevelChild (){
  return (
    <SecondLevelChild />
  )
}

function SecondLevelChild (){
  return (
    <ThirdLevelChild />
  )
}

function ThirdLevelChild () {
  const value = useContext(MyContext)
  return (
      <div>`My name is ${value.name}`</div>
  )
}