React warning Maximum update depth exceeded: firebase-react-hook - reactjs

Question

Currently, I'm trying to check if the user is logged in for my home page and display some different components depending on the log-in status.
However, i'm getting this 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.”
The following is my code in Appshell.js
import React from "react";
import TopRight from "./TopRight";
import { AppBar, Toolbar } from "#material-ui/core";
import BootstrapButton from "./BootstrapButton";
import { Link } from "react-router-dom";
import { useDocumentData } from "react-firebase-hooks/firestore";
import { useAuthState } from "react-firebase-hooks/auth";
import firebase from "firebase/app";
import SignOut from "./SignOut";
const firestore = firebase.firestore();
function AppShell() {
###The following line of code is causing the error###
const [currentUser] = useAuthState(firebase.auth());
#####################################################
const userRef = firestore.collection("Users").doc(currentUser?.uid);
const [user] = useDocumentData(userRef);
return (
<>
<div className="flex justify-between">
{currentUser ? <SignOut /> : <TopRight />}
</div>
<AppBar elevation={0} position="static" style={{ background: "#EDEDED" }}>
<Toolbar>
<Link to="/">
<BootstrapButton color="default">Home</BootstrapButton>
</Link>
<Link to="/opportunities">
<BootstrapButton color="default">Opportunities</BootstrapButton>
</Link>
{user?.Class === "recruiter" ? (
<Link to="/myposts">
<BootstrapButton color="default">My Posts</BootstrapButton>
</Link>
) : (
<Link to="/organisations">
<BootstrapButton color="default">Organisations</BootstrapButton>
</Link>
)}
<Link to="/about">
<BootstrapButton color="default">About</BootstrapButton>
</Link>
</Toolbar>
</AppBar>
</>
);
}
export default AppShell;
I have tried placing the line of code const [currentUser] = useAuthState(firebase.auth()); inside a useEffect hook to only update when page is rendered but apparently its not allowed. Hence, any suggestion to get rid of this error is much appreciated, thanks!