react-native - 反応ナビゲーションで別のスタックに移動できません

Question

ユーザーがサインアウトするときに画面 (以下の例では「設定」画面から「認証」) に移動しようとしてnavigation.navigate('Auth')いますが、「「認証」という名前の画面はありますか?」というエラーが表示されます。

ここで何が問題なのかわかりません。react-navigation 4 では、これが可能でした。

PS: トークンの部分は無視してかまいません。

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

import AsyncStorage from '@react-native-community/async-storage';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

import Login from './src/screens/Login'
import Register from './src/screens/Register'
import Welcome from './src/screens/Welcome'
import Map from './src/screens/Map'
import Shop from './src/screens/Shop'
import OfferConfirmation from './src/screens/OfferConfirmation'
import Settings from './src/screens/Settings'



const AuthStack = createStackNavigator()
const AuthStackScreen = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen name="Login" component={Login} />
    <AuthStack.Screen name="Register" component={Register} />
  </AuthStack.Navigator>
)

const MainStack = createStackNavigator()
const MainStackScreen = () => (
  <MainStack.Navigator>
    <MainStack.Screen
      name="Map" component={Map}
    />
    <MainStack.Screen name="Shop" component={Shop} />
    <MainStack.Screen name="OfferConfirmation" component={OfferConfirmation} />
    <MainStack.Screen name="Settings" component={Settings} />
  </MainStack.Navigator>
)

const Stack = createStackNavigator();

export default () => {

  const [token, setToken] = useState(null)

  return (
   <NavigationContainer>
    <Stack.Navigator>

      {token ?
        <Stack.Screen name="Main" component={MainStackScreen} />
      :
        <Stack.Screen name="Auth" component={AuthStackScreen} />
      }

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