Реагировать: useContext, как получить его из внешнего компонента?

Если у меня есть Comp1.js

const Comp1 = () => {
  const globalTheme = new createContext()
  return (
    <globalTheme.Provider globalStyle = {anyVar}>
     <Layout>
      <AnotherComponent />
     </Layout>
    </globalTheme.Provider>
  )
}

А потом в layout.js

  const globalStyle = useContext(globalTheme)
  console.info(globalStyle)

Я получаю globalTheme is not defined, я должен снова создать контекст?

  const globalTheme = new createContext()
  const globalStyle = useContext(globalTheme)
  console.info(globalStyle)

Тогда я получаю undefined за globalStyle

что мне не хватает?

Обновлено: Основываясь на комментариях, я использую третий файл и импортирую контекст, чтобы получить к нему доступ -> theme-context.js

import { createContext } from 'react'

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
}

export const ThemeContext = createContext(
  themes.dark // default value
)

Затем я предоставляю этот контекст в другом файле blog-template.js

import { ThemeContext } from '../context/theme-context'
import Layout from '../components/layout'

const Blog = () => {
let globalStyle = 'just any value'
return (
    <ThemeContext.Provider globalStyle = {globalStyle}>
      <Layout />
    </ThemeContext.Provider>
)}

А потом в layout.js

import React, { useContext} from 'react'
import { ThemeContext } from '../context/theme-context'

const Layout = () => {
  const globalStyle = useContext(ThemeContext)
  console.info(globalStyle)
}

Но globalStyle не определено, почему так?

Обновлено: ошибка заключалась в том, чтобы не предоставлять ценность в качестве опоры

-<ThemeContext.Provider globalStyle = {globalStyle}>
+-<ThemeContext.Provider value = {globalStyle}>