useContext Hook with Nested Components

What does this output?

const context = { theme: 'dark' }

function useTheme() { return context.theme }

function Grandparent() { console.log('Grandparent theme:', useTheme())
  return <Parent /> }

function Parent() { console.log('Parent theme:', useTheme())
  return <Child /> }

function Child() { context.theme = 'light'; console.log('Child theme:', useTheme())
  return 'Child' }

function App() { console.log('App theme:', useTheme())
  return <Grandparent /> }

console.log('Initial theme:', useTheme())
App()

Correct Output

Initial theme: dark
App theme: dark
Grandparent theme: dark
Parent theme: dark
Child theme: dark

Why this output?