I am trying to redirect to home page after login authentication using Azure Msal library. But after authentication it redirects back to login for few seconds and then goes to home page. I've pasted the code below. Please help.

login.tsx

import { SignInButton } from "../../components/button";
const Login:React.FC = () => {
   return(
    <div>
     <SignInButton />
   </div>);
}

Private Route.tsx

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { useIsAuthenticated, useMsal } from "@azure/msal-react";
import '../../theme/styles.css';

const PrivateRoute: React.FC<{
  component?: React.FC;
  path: string;
  exact: boolean;
  render?: any;
  isLoggedIn: boolean
}> = (props) => {
   const { component, path, exact } = props;
   const isAuthenticated = useIsAuthenticated();
   const {instance, accounts, inProgress} = useMsal();

   return (isAuthenticated) ? (<Route path={path} exact={exact} component={component}/>) : (<Redirect to="/login" />);
 };

 export default PrivateRoute;

App.tsx

 //other imports
 import Login from './pages/login';
 import PrivateRoute from './components/privateroute';
 import { useHistory } from "react-router";
 import { useIsAuthenticated, useMsal } from '@azure/msal-react';
 const App: React.FC = () => {
 const isAuth = useIsAuthenticated();
 const history = useHistory();
 useEffect(() => {
 if(isAuth){
  history.push("/");
  }
 },[isAuth])

 return (
   <IonApp>
     <Layout>
       <Switch>
         <PrivateRoute exact path="/" isLoggedIn={true} component={Home} />
         <PrivateRoute exact path="/frsevents" isLoggedIn={true} component={FRSEvents} />
       </Switch>
     </Layout>
     <Route exact path="/login" component={Login} />
   </IonApp>
  );
 }

 export default App;