почему реагирующая навигация не распознает мою полезную нагрузку?

Question

Я использую аутентификацию firebase для своего приложения-навигатора реакции. Когда я нажимаю функцию выхода, я получаю сообщение об ошибке:

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

цель состоит в том, чтобы выйти из системы и снова войти в систему. Функция выхода работает, но не часть навигации.

вот мой экран выхода из системы

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>
    )
};

Моя база навигации находится в приложении. js и выглядит это так.

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>
  );
}

реагирует на навигацию, не распознающую мое имя для входа, потому что я поместил его в тройку?