Javascript 子组件无法访问随上下文挂钩传递的函数

我在玩react context hooks API时遇到了问题，我正在通过我的提供程序传递这个函数，但子组件似乎无法运行它

下面是我的app.js文件

// import "./App.css";
import React, {useState} from "react";
import Test from "./Test"

import {ThemeContext,ThemeUpdateContext} from "./Contexts";


function App() {
  const [logged, setLogged] = useState(false);
  
  
  function connectRoom(){
    console.log("hello");
    setLogged(true);
  }
  return (
   
    <ThemeContext.Provider value={logged}>
      <ThemeUpdateContext.Provider value={connectRoom}>
        <Test />
      </ThemeUpdateContext.Provider>
    </ThemeContext.Provider>
  
   
  );
}

export default App;

下面是我的Test.js文件，我在其中创建了一个简单的登录/注销页面，当单击按钮时，该页面将进行切换

import React from 'react'
import {ThemeContext,ThemeUpdateContext} from './Contexts'

export default function Test() {

    const {logged} = React.useContext(ThemeContext)
    const {connectRoom} = React.useContext(ThemeUpdateContext)
    
    return (
        <div>
           {!logged ? (
        <h1> not logged</h1>
      ):(<h1>logged</h1>)}

      <button onClick={connectRoom}> click me</button> 
        </div>
    )
}

从“React”导入React
从“/Contexts”导入{ThemeSecontext，ThemeUpdateContext}
导出默认函数测试（）{
const{logged}=React.useContext（ThemeSecontext）
const{connectRoom}=React.useContext（ThemeUpdateContext）
返回(
{！登录了吗(
未记录
)：（已记录）}
点击我
)
}

这就是Test.js组件的外观：

---

我需要帮助理解为什么我单击按钮时页面没有切换到登录，以及为什么单击按钮时页面没有控制台。记录任何内容。

非常感谢，我还没有做出反应，所以我仍然犯这些愚蠢的错误：（始终先检查文档：示例行是

const-theme=useContext（ThemeSecontext）；

<ThemeContext.Provider value={logged}>
// ...
const {logged} = React.useContext(ThemeContext)

<ThemeContext.Provider value={logged}>
// ...
const {logged} = React.useContext(ThemeContext)

const logged = React.useContext(ThemeContext)
const connectRoom = React.useContext(ThemeUpdateContext)