Reactjs App.js中的H2组件不会动态呈现.这可能是什么问题

以下是位于同一目录中的我的组件:

// App.js
import "./styles.css";
import React, { useState } from "react";
import Nav from "./Nav";
import { AppProvider } from "./context";

export default function App() {
  const [signedIn, setSignedIn] = useState(true);

  return (
    <div className="App my-3">
      <AppProvider>
        <Nav />
        <h2 className="my-2">{signedIn ? "Signed In!" : "Signed Out!"}</h2>
      </AppProvider>
    </div>
  );
}


// Nav.js
import Btn from "./Btn";

const Nav = () => {
  return <Btn />;
};

export default Nav;


// Btn.js
import "bootstrap/dist/css/bootstrap.min.css";
import { useContext } from "react";
import { context } from "./context";

const Btn = () => {
  const [signedIn, setSignedIn] = useContext(context);
  const handleButtonClick = () => {
    setSignedIn((prevState) => !prevState);
  };

  return (
    <button className="btn btn-primary" onClick={handleButtonClick}>
      {signedIn ? "Signed In!" : "Signed Out!"}
    </button>
  );
};

export default Btn;


// context.js
import React, { useState } from "react";

const context = React.createContext();

const AppProvider = ({ children }) => {
  const [signedIn, setSignedIn] = useState(true);

  return (
    <context.Provider value={[signedIn, setSignedIn]}>
      {children}
    </context.Provider>
  );
};

export { context, AppProvider };

这个问题只有在我try 创建单独的Conext.js文件时才出现.当代码如下所示时，它完全可以正常工作:

// App.js
import "./styles.css";
import React, { useState } from "react";
import Nav from "./Nav";

export const context = React.createContext();

export default function App() {
  const [signedIn, setSignedIn] = useState(true);

  return (
    <div className="App my-3">
      <context.Provider value={[signedIn, setSignedIn]}>
        <Nav />
        <h2 className="my-2">{signedIn ? "Signed In!" : "Signed Out!"}</h2>
      </context.Provider>
    </div>
  );
}


// Btn.js
import "bootstrap/dist/css/bootstrap.min.css";
import { useContext } from "react";
import { context } from "./App";

const Btn = () => {
  const [signedIn, setSignedIn] = useContext(context);
  const handleButtonClick = () => {
    setSignedIn((prevState) => !prevState);
  };

  return (
    <button className="btn btn-primary" onClick={handleButtonClick}>
      {signedIn ? "Signed In!" : "Signed Out!"}
    </button>
  );
};

export default Btn;

你能帮帮我吗？我仍然是一个react 的初学者，所以我不确定我应该做些什么来克服这个错误.我试了几种方法，但似乎都不管用