Why my screen not detected after separate that into different function on react native navigation

Question

i cant do the navigate to the main screen after separating the function. first function was LoginNav and second was on the App function. im implementing this to make users no need to login again after closing the app.

this is the code inside my routes.js

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarHideOnKeyboard: true,
        tabBarStyle: {
          height: heightPercentageToDP(7),
        },
        tabBarActiveTintColor: COLOR_PRIMARY,
        tabBarLabelStyle: {
          marginBottom: 4,
          fontFamily: InterBold,
        },
      }}>
      <Tab.Screen
        name="HomeScreen"
        options={{
          headerShown: false,
          tabBarLabel: 'Beranda',
          tabBarIcon: ({color, size}) => (
            <Entypo name="shop" color={color} size={size} />
          ),
        }}
        component={Home}
      />
      <Tab.Screen
        name="SearchShopScreen"
        options={{
          headerTitle: 'Explorasi',
          tabBarLabel: 'Explorasi',
          headerStyle: {
            backgroundColor: COLOR_PRIMARY,
          },
          headerTintColor: 'white',
          tabBarIcon: ({color, size}) => (
            <MaterialIcon name="explore" color={color} size={size} />
          ),
        }}
        component={SearchShop}
      />
      <Tab.Screen
        name="FavoritesScreen"
        options={{
          headerTitle: 'Favorit',
          tabBarLabel: 'Favorit',
          headerStyle: {
            backgroundColor: COLOR_PRIMARY,
          },
          headerTintColor: 'white',
          tabBarIcon: ({color, size}) => (
            <Octicon name="feed-star" color={color} size={size} />
          ),
        }}
        component={Fav}
      />
      <Tab.Screen
        name="FundingScreen"
        options={{
          headerTitle: 'Para Investor Umkm',
          tabBarLabel: 'Pendanaan',
          headerStyle: {
            backgroundColor: COLOR_PRIMARY,
          },
          headerTintColor: 'white',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcon
              name="account-cash"
              color={color}
              size={size}
            />
          ),
        }}
        component={FundingScreen}
      />
      <Tab.Screen
        name="ProfileScreen"
        options={{
          headerTitle: 'Profile',
          tabBarLabel: 'Profil',
          headerStyle: {
            backgroundColor: COLOR_PRIMARY,
          },
          headerTintColor: 'white',
          tabBarIcon: ({color, size}) => (
            <FontAwesome name="user-circle" color={color} size={size} />
          ),
        }}
        component={ProfileScreen}
      />
    </Tab.Navigator>
  );
}

export const LoginNav = () => {
  return (
    <NavigationContainer>
       <Stack.Navigator>
            <Stack.Screen
              name="Intro"
              options={{
                headerShown: false,
              }}
              component={Login}
            />
            <Stack.Screen
              name="RegisterScreen"
              component={Register}
              options={{
                headerTitle: 'Buat Akun Baru',
                headerStyle: {
                  backgroundColor: COLOR_PRIMARY,
                },
                headerTintColor: 'white',
              }}
            />
            <Stack.Screen
              name="SplashScreen"
              component={SplashScreen}
              options={{
                headerShown: false,
              }}
            />
            <Stack.Screen
              name="ForgotPasswordScreen"
              component={ForgotPassword}
              options={{
                headerShown: false,
              }}
            />
            <Stack.Screen
              name="InformationResetPassword"
              component={InformationScreen}
              options={{
                headerTitle: 'Reset Password',
                headerBackVisible: false,
                headerTitleAlign: 'center',
                headerStyle: {
                  backgroundColor: COLOR_PRIMARY,
                },
                headerTintColor: 'white',
              }}
            />
          </Stack.Navigator>
    </NavigationContainer>
  )
}

function App() {
  return (
    <NavigationContainer> 
          <Stack.Navigator>
            <Stack.Screen
              name="Main"
              component={MyTabs}
              options={{
                headerShown: false,
              }}
            />
            <Stack.Screen
              name="DetailShop"
              component={DetailShop}
              options={{
                headerShown: false,
              }}
            />
            <Stack.Screen
              name="EducationalDetail"
              component={EducationalDetailScreen}
              options={{
                headerTitle: 'Edukasi UMKM',
                headerStyle: {
                  backgroundColor: COLOR_PRIMARY,
                },
                headerTintColor: 'white',
              }}
            />
            <Stack.Screen
              name="NearbyScreen"
              component={NearbyScreen}
              options={{
                headerTitle: 'Bisnis Sekitar',
                headerStyle: {
                  backgroundColor: COLOR_PRIMARY,
                },
                headerTintColor: 'white',
              }}
            />
            <Stack.Screen
              name="EducationalScreen"
              component={EducationScreen}
              options={{
                headerTitle: 'Artikel dan Edukasi',
                headerStyle: {
                  backgroundColor: COLOR_PRIMARY,
                },
                headerTintColor: 'white',
              }}
            />
            <Stack.Screen
              name="FundingDetailScreen"
              component={FundingDetail}
              options={{
                headerTitle: 'Detail Investor',
                headerStyle: {
                  backgroundColor: COLOR_PRIMARY,
                },
                headerTintColor: 'white',
              }}
            />
          </Stack.Navigator>
    </NavigationContainer>
  );
}

this is the app.js

<Provider store={store}>
      <StatusBar
        barStyle="dark-content"
        hidden={false}
        backgroundColor="transparent"
        translucent={true}
      />
      {showSplash ? ( 
        <SplashScreen />
      ) : (
        isToken ? (<Routes /> ) : (<LoginNav />) 
      )}
      <Toast />
    </Provider>

the app loaded successfully on the login screen, but when i try to login, the app cant detect the main screen.

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

Do you have a screen named 'Main'?