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

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;