firebase authentication – why does react navigation not recognize my payload?


I am using firebase auth for my react navigator app. When I press the logout function i get an error that says

console.error: the action 'NAVIGATE' with payload{'name':" login"} was not handled by any navigator.

the goal is for me to logout then sign back in. The logout function works but not navigation portion.

here is my logout screen

export default function ProductScreen({navigation}){

    const logOutPress = () => {
        try {
        auth()
        .signOut()
        .then(() => { navigation.navigate("Login"),
        alert('You have signed out')})
    } catch(error){
    console.log('Unable to logout')}
    }
return(
<View>
<TouchableOpacity
onPress={()=> logOutPress()}>
<Text style={styles.buttonText}>Log Out</Text>
</TouchableOpacity>
</View>
    )
};

My navigation base is located in app.js and it looks like this.

import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react'
import { firebase } from './src/firebase/config'
import { NavigationContainer} from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { LoginScreen,  RegistrationScreen,ProductScreen, LawnCareScreen, ResetPasswordScreen,CarDetailScreen,PaymentScreen} from './src/screens'
import {decode, encode} from 'base-64'
if (!global.btoa) {  global.btoa = encode }
if (!global.atob) { global.atob = decode }

const Stack = createStackNavigator();

export default function App() {

  const (loading, setLoading) = useState(true)
  const (user, setUser) = useState(null)

  useEffect(() => {
    const usersRef = firebase.firestore().collection('users');
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        usersRef
          .doc(user.uid)
          .get()
          .then((document) => {
            const userData = document.data()
            setLoading(false)
            setUser(userData)
          })
          .catch((error) => {
            setLoading(false)
          });
      } else {
        setLoading(false)
      }
    });
  }, ());

  if (loading) {
    return (
      <></>
    )
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        { user ? (
          <Stack.Screen name="Products">
            {props => <ProductScreen {...props} extraData={user} />}
          </Stack.Screen>
        ) : (
          <>
        <Stack.Screen name="Login" component={LoginScreen} />

          </>
        )}
        <Stack.Screen name="Registration" component={RegistrationScreen} />
        <Stack.Screen name="Lawn Care" component={LawnCareScreen} />
        <Stack.Screen name="Reset Password" component={ResetPasswordScreen} />
        <Stack.Screen name="Car Detail" component={CarDetailScreen} />
        <Stack.Screen name="Payment" component={PaymentScreen} />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

is react navigation not recognizing my “login” name because i placed it into a ternary ?