How can I find the bad setstate in my code?

My react native code seems to execute appropriately. I still keep getting a bad setstate code error. Here is the error:

Warning: Cannot update a component (`ForwardRef(BaseNavigationContainer)`) while rendering a different component (`Login`). To locate the bad setState() call inside `Login`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
  >> in Login (created by SceneView)

I was able to trace it back to this line (I think at least): Login @ Login.js:16

It would be this part of the code:

export function Login({navigation}){
if (auth.currentUser) {
navigation.navigate('Root')
} else {
onAuthStateChanged(auth, (user) => {
if (user) {
navigation.navigate("Root")
} 
});
}

Here is the the entire component that appears to have the bad setState. I can't seem to figure out how to get this error to go away. All the code seems to be working ok, though...

export function Login({ navigation }) {
if (auth.currentUser) {
navigation.navigate("Root");
} else {
onAuthStateChanged(auth, (user) => {
if (user) {
navigation.navigate("Root");
}
});
}
let [errorMessage, setErrorMessage] = React.useState("");
let [email, setEmail] = React.useState("");
let [password, setPassword] = React.useState("");
let login = () => {
if (email !== "" && password !== "") {
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
navigation.navigate("Home", { user: userCredential.user });
// ...
})
.catch((error) => {
setErrorMessage(error.message);
});
}
};
return (
<View style={AppStyles.loginContainer}>
<KeyboardAvoidingView
style={AppStyles.backgroundCover}
behavior={Platform.OS === "ios" ? "padding" : null}
keyboardVerticalOffset={60}
>
<View style={AppStyles.loginScreen}>
<Text style={AppStyles.textHeader}>Login</Text>
<Text style={AppStyles.errorText}>{errorMessage}</Text>
<TextInput
style={AppStyles.input}
placeholder="Email"
placeholderTextColor={"#fff"}
value={email}
onChangeText={setEmail}
/>
<TextInput
style={AppStyles.input}
placeholder="Password"
placeholderTextColor={"#fff"}
secureTextEntry={true}
passwordRules={{ required: true, minLength: 6 }}
value={password}
onChangeText={setPassword}
/>
<View style={AppStyles.rowContainer}>
<Text style={AppStyles.text}>Don't have an account? </Text>
<TextButton
size={"20px"}
text={"Sign Up"}
color={"#fff"}
onPress={() => navigation.navigate("Signup")}
/>
</View>
<View style={AppStyles.rowContainer}>
<Text style={AppStyles.text}>Forgot your password? </Text>
<TextButton
size={"20px"}
text={"Reset"}
color={"#fff"}
onPress={() => navigation.navigate("ResetPassword")}
/>
</View>
<TextButton
size={"20px"}
text={"Login"}
backgroundColor="#83C9F4"
paddingVertical={6}
paddingHorizontal={12}
onPress={login}
/>
</View>
</KeyboardAvoidingView>
</View>
);
}

You should always wait for your component to be fully mounted before any navigation action.

Can you try to add your navigation logic into a useEffect?

useEffect(() => {
  if (auth.currentUser) {
    navigation.navigate('Root')
  }

  const subscriber = onAuthStateChanged(auth, (user) => {
    if (user) {
      navigation.navigate("Root")
    } 
  });

  return subscriber
}, [])