Throttling navigation to prevent the browser from hanging in React App firebase9 - reactjs

Question

// I am working on Login/Register from in React and I am using firebase auth for
authentication. When the user logged in I want to redirect the user on the root path or
on App component. But I got into an infinite loop which gives me this error (#Throttling
navigation to prevent the browser from hanging.#)//
**App Js**
import { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.css";
import Header from "./components/Header";
import Home from "./components/Home";
import Login from "./components/Login";
import { getUserAuth } from "./actions";
import { connect } from "react-redux";
function App(props) {
useEffect(() => {
props.getUserAuth();
}, []);
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Login />} />
<Route
path="/home"
element={
<>
<Header />
<Home />
</>
}
/>
</Routes>
</BrowserRouter>
</div>
);
}
const mapStateToProps = (state) => {
return {};
};
const mapDispatchToProps = (dispatch) => ({
getUserAuth: () => dispatch(getUserAuth()),
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
//App Section End//
**LogIn**
import styled from "styled-components";
import { connect } from "react-redux";
import { signInAPI } from "../actions";
import { Navigate } from "react-router-dom";
const Login = (props) => {
return (
<Container>
{props.user && <Navigate to="/home" />}
<Nav>
<a href="/">
<img src="/images/login-logo.svg" alt="" />
</a>
<div>
<Join>Join now</Join>
<SignIn>Sign in</SignIn>
</div>
</Nav>
<Section>
<Hero>
<h1>Welcome to your professional community</h1>
<img src="/images/login-hero.svg" alt="" />
</Hero>
<Form>
<Google onClick={() => props.signIn()}>
<img src="/images/google.svg" alt="" />
Sign in with Google
</Google>
</Form>
</Section>
</Container>
);
};
const mapStateToProps = (state) => {
return {
user: state.userState.user,
};
};
const mapDispatchToProps = (dispatch) => ({
signIn: () => dispatch(signInAPI()),
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);
//LogIn Section End to identify the error //
**SignIn**
import { auth, provider } from "../firebase";
import { signInWithPopup, onAuthStateChanged, signOut } from "firebase/auth";
import { SET_USER } from "./actionType";
export const setUser = (payload) => ({
type: SET_USER,
user: payload,
});
export function signInAPI() {
return (dispatch) => {
signInWithPopup(auth, provider)
.then((payload) => {
// console.log(payload.user);
dispatch(setUser(payload.user));
})
.catch((error) => alert(error.message));
};
}
export function getUserAuth() {
return (dispatch) => {
onAuthStateChanged(auth, (user) => {
console.log(user);
if (user) {
dispatch(setUser(user));
}
});
};
}
export function signOutAPI() {
return (dispatch) => {
signOut(auth)
.then(() => {
dispatch(setUser(null));
})
.catch((error) => {
console.log(error.message);
});
};
}
**End SignIn**
//**Throttling navigation** to prevent the browser from hanging.//
//Warning: Maximum update depth exceeded. This can happen when a component calls
setState inside useEffect, but useEffect either doesn't have a dependency array, or
one of the dependencies changes on every render. Unable to identify the error //