How can I detach a firebase listener in the useEffect hook cleaning function if the App component does not unmount

Question

the useEffect cleanup function is not being triggered when I sign-out using (firebase) and I get the error Uncaught Error in onSnapshot: FirebaseError: Missing or insufficient permissions. once I get redirected to the sign-in/ sign-up page.

I understand that the cleaning function get triggered if the component unmounts, but in my case the App Component doesn't unmounts (and It shouldn't), so the listener doesn't get detached

   function App() {
     const [currentUser, setCurrentUser] = useState('')

     useEffect(() => {
      let unsubscribeFromAuth = null;

      unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
        if(userAuth) {
          const userRef = await createUserProfileDocument(userAuth)

          userRef.onSnapshot(snapshot => {
            setCurrentUser({
              id: snapshot.id,
              ...snapshot.data()
            })
          })
         }

        setCurrentUser(userAuth)
      })

      // the cleaning function is not being triggered because the App component is not unmounting (it shouldn't unmount anyways)
      return () => unsubscribeFromAuth()
    },[])

    return (
      <div className="App">
        <Switch>
          <Route exact path="/">
            {
              currentUser
                ? <Redirect from="/" to="/userpage" />
                : <SignInAndSignUpPage currentUser={currentUser} />
            }
          </Route>

          <Route path='/userpage'>
            {
              !currentUser
                ? <Redirect from="/userpage" to="/" />
                : <UserPage user={currentUser} />
            }
          </Route>
        </Switch>
      </div>
    );
  }

my firebase security rules:

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth.uid != null;
    }   
  }
}

my signout button located in the userpage:

 <button
    onClick={() => {
      auth.signOut();
    }}
 >
   SIGN OUT
 </button>