The action 'NAVIGATE' with payload {"name":"Main"} was not handled by any navigator

[piyushyadav0191]

Login.js

import { useNavigation } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import axios from 'axios';
import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Button,
  TouchableOpacity,
} from 'react-native';

export default function Login() {
  const navigation = useNavigation();
  const [fData, setfData] = useState({
    email: '',
    password: '',
  });

  const handleSubmit = async () => {
    try {
      const response = await axios.post(
        '<backend_url>/login',
        fData
      );
      console.log(response.data);
      await AsyncStorage.setItem('token', response.data.token);
    } catch (error) {
      if (error.response && error.response.status === 422) {
        alert('Invalid Credentials');
      } else {
        alert('An error occurred. Please try again later.');
      }
    }
  };

  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require('../assets/BU.png')} />

      <StatusBar style='auto' />

      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder='Enter your Email.'
          placeholderTextColor='#003f5c'
          autoCapitalize='none'
          autoCorrect={false}
          keyboardType='email-address'
          value={fData.email}
          onChangeText={(text) => setfData({ ...fData, email: text })}
        />
      </View>

      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder='Enter your password.'
          placeholderTextColor='#003f5c'
          secureTextEntry={true}
          autoCapitalize='none'
          autoCorrect={false}
          value={fData.password}
          onChangeText={(text) => setfData({ ...fData, password: text })}
        />
      </View>

      <TouchableOpacity onPress={() => navigation.navigate('Register')}>
        <Text style={styles.forgot_button}>Not a Member yet? Register </Text>
      </TouchableOpacity>

      <Button title='Login' onPress={() => handleSubmit()} />
    </View>
  );
}

App.js

import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Login from './screens/Login';
import LoadingScreen from './components/LoadingScreen';
import Register from './screens/Register';
import Verification from './screens/Verification';
import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Main from './screens/Main';

const Stack = createNativeStackNavigator();

function App() {
  const [isLoggedIn, setLogged] = useState(null);

  useEffect(() => {
    const getToken = async () => {
      const token = await AsyncStorage.getItem('token');
      console.log(token);
      if (token) {
        setLogged(true);
      } else {
        setLogged(false);
      }
    };
    getToken();
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {isLoggedIn ? (
          <>
            <Stack.Screen name='Main' component={Main} />
         
          </>
        ) : (
          <>
            <Stack.Screen name='Login' component={Login} />
            <Stack.Screen name='Register' component={Register} />
            <Stack.Screen name='verification' component={Verification} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

I have read the authentication flow documentation and it is saying that when signed in becomes true i will be automatic redirect to Main page but it is not working

I have to refresh the app to get the Main page after login.

I am stuck to this problem since yesterday and referred other's answers but didn't work. Thank you