React native authenticated screen issue

Question

I want when user is authenticated they can see

const HomeStack = () => (
  <Stack.Navigator initialRouteName="Dashboard">
    <Stack.Screen name="Dashboard" component={DashboardScreen} options={{ headerShown: false }} />
    <Stack.Screen name="GrammarTopics" component={GrammarTopicsScreen} options={{ title: 'Grammar Topics' }} />
    <Stack.Screen name="GrammarPractice" component={GrammarPracticeScreen} options={{ title: 'Grammar Practice' }} />
  </Stack.Navigator>
);

and if they are not authenticated they can only see

 <Stack.Navigator initialRouteName="Welcome">
      <Stack.Screen name="Welcome" component={WelcomeScreen} options={{ headerShown: false }} />
      <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
      <Stack.Screen name="Signup" component={SignupScreen} options={{ headerShown: false }} />
    </Stack.Navigator>

So I try with below method

// App.js
import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AuthStack from './src/Routes/AuthStack';
import MainTabs from './src/Routes/HomeStack';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    const checkAuthStatus = async () => {
      const token = await AsyncStorage.getItem('authToken');
      setIsAuthenticated(!!token);
    };

    checkAuthStatus();

  }, []);


  return (
    <NavigationContainer>
      {isAuthenticated ? (
        <MainTabs />
      ) : (
        <AuthStack />
      )}
    </NavigationContainer>
  );
};

export default App;

Now my main problem is when I try to login I got ' ERROR The action 'RESET' with payload {"index":0,"routes":[{"name":"Home"}]} was not handled by any navigator.'

This is my login functionality

 const handleLogin = async () => {
    try {
      const response = await axios.post(
        'example.com/api/login',
        { email, password },
        { headers: { 'X-CSRF-TOKEN': csrfToken } }
      );
  
      if (response.data && response.data.user && response.data.token) {
        await AsyncStorage.setItem('userData', JSON.stringify(response.data.user));
        await AsyncStorage.setItem('authToken', response.data.token);
        Alert.alert('Success', 'Login successful!');
        getTokenAndSendToServer(); // Get FCM token and send to server after successful login
        
        // Reset the navigation state to the main stack
        navigation.dispatch(
          CommonActions.reset({
            index: 0,
            routes: [{ name: 'Home' }],
          })
        );
      } else {
        Alert.alert('Error', 'No user data or token received');
      }
    } catch (error) {
      Alert.alert('Error', 'Invalid email or password');
      console.error("Error details:", error.response || error);
    }
  };

and when I try to logout I got

 ERROR  The action 'RESET' with payload {"index":0,"routes":[{"name":"Welcome"}]} was not handled by any navigator.

This is my logout functionality

const handleLogout = async () => {
    try {
      await AsyncStorage.removeItem('userData');
      await AsyncStorage.removeItem('authToken'); // Remove authToken as well
      Alert.alert('Success', 'Logged out successfully!');

      navigation.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [{ name: 'Welcome' }],
        })
      );
    } catch (error) {
      console.error('Error logging out:', error);
      Alert.alert('Error', 'Failed to log out. Please try again.');
    }
  };

I'm very new in react native so I can't understand how to solve this issue. Please help me.

Login and logout without any issues.