Context doesn't update in React.js. how to implement a solution?

Question

in react i have tried to implement a solution to forward values with context. but my context doesn't work in another page(component)

this is my MainPage where user logins in login part what i want is ; i want to check login here and if login res != null then i want to set these res data into context values and use them in the bookPage

  import React from  "react"; 
import{ useContext, useEffect, useState } from "react";
import { TextField } from "@mui/material";
import { Button } from "@mui/material";
import "./Pages.css";
import { AccountContext } from "./AccountProvider";
import { useHistory } from "react-router-dom";
import axios from "axios";


function MainPage() {
  const [email, setEmail1] = useState("");
  const [password, setPassword1] = useState("");
  const [name, setName1] = useState("");


  const [loginemail, setloginEmail] = useState("");
  const [loginpassword, setloginPassword] = useState("");
  

  const [registeremail, setregisterEmail] = useState("");
  const [registerpassword, setregisterPassword] = useState("");
  const [registername, setregisterName] = useState("");

  const {
    Name,
    Mail,
    Password,
    UID,
 
    setName,
    setPassword,
    setMail,
    setUID,
 
  } = useContext(AccountContext);

 
  let history = useHistory();

  const [data,setData] = useState([]);


  const LoginClick =  () => {
    
      setEmail1(loginemail);
      setPassword1(loginpassword);


      axios
      .get( `http://localhost:5000/getLogin/?email=${email}&password=${password}`)
      .then((resp) => {

        
          setUID(resp.data[0]._id)
          setName(resp.data[0].name)
          setMail(resp.data[0].email)
          setPassword(resp.data[0].password)

          console.log(UID)
          if (resp.data[0]._id != null) {
          
            history.push("/BookPage")
            history.go()
          }
        

          })
          .catch((e) => {
            alert(e);
          });

  

    
    };

 


  const RegisterClick = async (e) => {

     setEmail1(registeremail);
     setName1(registername);
     setPassword1(registerpassword);

     console.log(email,  password)

    let res = await fetch("http://localhost:5000/registerUser", {
      method: "post",
      body: JSON.stringify({ name, email, password }),
      headers: {
        "Content-Type": "application/json",
      },
    });
    res = await res.json();
    console.warn(res);
    if (res) {
      alert("Registered success");
      setName1("");
      setPassword1("");
      setEmail1("");
      history.push("/BookPage");
    }
    if (!res) {
      alert("registered failed");
    }
  };

  return (
    <>
      <div class="main-page">
        <h1>Welcome to the Library Management System!!! </h1>
        <div class="user-form">
          <div class="login-form">
            <h2>User Login </h2>
            <TextField
              id="loginemail"
              label="email"
              variant="filled"
              type="email"
              value={loginemail}
              onChange={(e) => {setloginEmail(e.target.value)
                setEmail1(e.target.value)
                setMail(e.target.value)
              }}
            />
            <TextField
              id="loginpassword"
              label="password"
              variant="filled"
              type="password"
              value={loginpassword}
              onChange={(e) => {setloginPassword(e.target.value) 
                setPassword1(e.target.value)
                setPassword(e.target.value)
              }}
            />
            <Button variant="outlined" onClick={LoginClick 
            
            }>
              {" "}
              Login
            </Button>
          </div>
          <div class="register-form">
            <h2>New User? Register Here!</h2>
            <TextField
              id="registername"
              label="name"
              variant="filled"
              value={registername}
              onChange={(e) => {setregisterName(e.target.value)
              setName1(e.target.value)}}
            />
            <TextField
              id="regsiteremail"
              label="email"
              variant="filled"
              type="email"
              value={registeremail}
              onChange={(e) => {setregisterEmail(e.target.value)
                setEmail1(e.target.value)
              }}
            />
            <TextField
              id="registerpassword"
              label="password"
              variant="filled"
              value={registerpassword}
              onChange={(e) => {setregisterPassword(e.target.value)
                setPassword1(e.target.value)
              }}
            />
            <Button variant="outlined" onClick={RegisterClick}>
              {" "}
              Register
            </Button>
          </div>
        </div>
      </div>
    </>
  );
}

export default MainPage;

this is my bookPage and here i want to use my user data even on title (h1) it doesn't shown in there i tried to console.log but it doesn't worked either somehow these values doesn't change or update

import React from "react";
import { AccountContext } from "./AccountProvider";

export default function BookPage() {

const { Id, Name, Email, Password, setID, setName, setEmail, setPassword } =
    useContext(AccountContext);  //this is where i expect to get values from mainPage

 return (
    <>
      <div className="book-page">
        <h1>
          Welcome , {Id} {Email} {Name}
        </h1>
    </>
)


}

this is the context i try to use

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

const AccountContext = createContext();

function AccountProvider(props) {
  const [Mail, setMail] = useState("");
  const [Password, setPassword] = useState("");
  const [UID, setUID] = useState("");
  const [Name,setName] = useState("");  
  return (
    <AccountContext.Provider
      value={{
        Mail: Mail,
        Password: Password,  
        UID: UID,
        Name:Name,

        setMail,
        setPassword,

        setUID,
        setName,
        
      }}
    >
      {props.children}
    </AccountContext.Provider>
  );
}

export {AccountContext, AccountProvider};

and this is the index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { AccountProvider } from "./PAGES/AccountProvider";


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
   <AccountProvider>
      <App />
   </AccountProvider>
  </React.StrictMode>
);

i have tried many solutions but i couldn't found any of them work

edit(1)

this is my routerPage

import React from "react";
import MainPage from "./MainPage";
import Deneme from "./deneme";

import { Router, Switch, Route } from "react-router-dom";
import BookPage from "./BookPage";
import { createBrowserHistory } from "history";


export default function RouterPage() {
  let history= createBrowserHistory();

  return (
    <div>
      <Router history={history}>
        <Switch>
          <Route exact path="/">
            <MainPage />
          </Route>
          <Route exact path="/BookPage">
            <BookPage />
          </Route>
          <Route path="/deneme">
            <Deneme />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

and in the app component

import React from 'react';
import RouterPage from "./PAGES/RouterPage.js";



function App() {
  return (
   
    <RouterPage/>
   
  );
}

export default App;