Route Protection in React js not working well

Question

I'm using Laravel on the backend and react.js on the frontend , when I try to login it will redirect to the home ("/") but when I refresh the page I am redirected to login page again. I am using rote protection file which takes component as a parameter and all the components passed in protected route are only accessible by logged in users.. after logging in when I try to access protected pages I am redirected to login page.. can any body help?

app.js

function App() {
  return (
    <div className="App">
      {/* <AuthContextProvider> */}
      <BrowserRouter>
      <Switch>
      <Route path = "/login"><Login/></Route>
      <Route path= "/register"><Register/></Route>
      <Route path = "/add"><AuthProtection component = {AddProduct}/> </Route>
      <Route path = "/update"><AuthProtection component = {UpdateProduct}/> </Route>
      <Route path = "/search"><AuthProtection component = {Search}/> </Route>
      <Route path = "/"><AuthProtection component = {Home}/> </Route>
      </Switch>
      </BrowserRouter>
      {/* </AuthContextProvider> */}
    </div>
  );
}

export default App;

login.js

export const Login = () => {
    const history = useHistory()
    
    const [email, setemail] = React.useState("")
    const [password, setpass] = React.useState("")
    
   
   
    const loginuser = e =>{
        e.preventDefault();
        axios.defaults.withCredentials = true;
        let data = {email,password}
        axios.get('http://localhost:8000/sanctum/csrf-cookie').then(response => {
            console.log(response)
           axios.post('http://localhost:8000/login',data ,{
            headers: {
                'Content-Type': 'application/json',
                "Accept": "application/json",
                'X-XSRF-TOKEN': (() => {
                    const name = 'XSRF-TOKEN'
                    const cookies = '; ' + document.cookie
                    const parts = cookies.split('; ' + name + '=')
                    const value = parts.length == 2 ? parts.pop().split(';').shift() : null
    
                    console.log('>>> XSRF-TOKEN', value)
    
                    return value
                })(),
            },
          }).then(response => {
              
              localStorage.setItem("user-info" , JSON.stringify(response.config.headers["X-XSRF-TOKEN"]))
              Auth.authenticate();
           
               history.push("/");
           
          
         });
        });

    }
    return (
        <>
        <Header/>
        <div>
            
            <div className="wrapper fadeInDown">
                <div id="formContent">
                    {/* Tabs Titles */}
                    {/* Icon */}
                    <div className="fadeIn first">
                    
                    </div>
                    {/* Login Form */}
                    <form onSubmit = {loginuser}>
                        <input type="text" value={email} onChange={(e)=>setemail(e.target.value)} className="fadeIn second"  placeholder="login" />
                        <input type="password" value={password} onChange={(e)=>setpass(e.target.value)} className="fadeIn third"  placeholder="password" />
                        <button type="submit" className="fadeIn fourth btn btn-primary" >LOGIN</button>
                    </form>
                    {/* Remind Passowrd */}
                    <div id="formFooter">
                        <a className="underlineHover" href="#">Forgot Password?</a>
                    </div>
                </div>
            </div>

        </div>
        </>
    )
}

Auth.js

const Auth = {
    isAuthenticated: false,
    authenticate() {
      this.isAuthenticated = true;
    },
    signout() {
      this.isAuthenticated = false;
    },
    getAuth() {
        return this.isAuthenticated;
      }
  };

  export default Auth;

protectedRoutes.js

import React from 'react'
import { useHistory } from 'react-router'
import Auth from './Auth'
import { AuthContext } from './AuthContext';



export const AuthProtection = (props) => {
    console.log(props)
    const history = useHistory()
    let ProtectedTemplate = props.component
    console.log(Auth.getAuth())
    React.useEffect(()=>{
    if( !Auth.getAuth() ){
        history.push("/login")
    }
    
})

   
    return (
        <div>
            <ProtectedTemplate/>
        </div>
    )
}