Reactjs 如何用状态值更新上下文值

我可以接收正确的对象，但无法使用状态值更新对象的上下文值

在：

const Context = createContext({
  theme: dark,
  toggleTheme: () => {},
});

我想使用useState修改的动态值来创建主题：dark，been，theme:defaultTheme

import React, { createContext, useState } from 'react';

import light from '../themes/light';
import dark from '../themes/dark';

const Context = createContext({
  theme: dark,
  toggleTheme: () => {},
});

export default Context;

export function ThemeContextProvider({ children }) {
  const [defaultTheme, setDefaultTheme] = useState(dark);

  function toggleTheme() {
    setDefaultTheme(defaultTheme === dark ? light : dark);
  }
  
  return (
    <Context.Provider value={{ theme, toggleTheme }}>
    {children}
    </Context.Provider>
  )
}

import React，{createContext，useState}来自“React”；
从“../themes/light”导入灯光；
从“../themes/dark”导入深色；
const Context=createContext({
主题：黑暗，
toggleTheme:（）=>{}，
});
导出默认上下文；
导出函数ThemeContextProvider（{children}）{
const[defaultTheme，setDefaultTheme]=useState（暗）；
函数toggleTheme（）{
setDefaultTheme（defaultTheme==暗？亮：暗）；
}
返回(
{儿童}
)
}

您正在向上下文提供程序传递一个未定义的值。（

主题

在

主题提供程序

组件中未定义）。您需要传递

defaultTheme

<Context.Provider value={{ theme: defaultTheme, toggleTheme }}>
    {children}
</Context.Provider>

{儿童}