我正在测试 useContext ，但出现错误，我不知道如何修复它，应用程序的想法是使用 useContext 创建一个计数器，每次按下按钮时计数器都会增加一。

我创建了一个计数器组件：

import { useContext } from "react";

import { CountContext } from "../../context/Count";

export const Counter = () => {
  const { count, setCount } = useContext(CountContext);

  return (
    <h2>Counter: {count}</h2>

    // <button
    //   onClick={() => {
    //     setCount(count + 1);
    //   }}
    // >
    //   Count + 1
    // </button>
  );
};

这正在调用以下上下文：

import { createContext, useState } from "react";

export const CountContext = createContext();

export default function CountProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

我收到以下错误：

我不知道是什么导致了错误，我制作了一个 codesandbox 来显示问题： https://codesandbox.io/s/usecontext-error-mwgwt?file=/src/components/counter/index.js