Navigation does not work in React Native when navigate or replace

I implement login/register in react native app. but my navigation fails.
This is my app.js file. Tab Navigation that should be rendered once user is authenticated otherwise I need to show login page.

const MainTabs = ({ navigation }) => {
  const { logout, removeToken } = useContext(UserContext);

  const handleLogout = async () => {
    await removeToken();
    navigation.replace('Login'); // Use replace instead of navigate
  };

  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} options={{
        headerShown: true,
        headerRight: () => (
          <Button
            onPress={handleLogout}
            title="Logout"
            color="#000"
          />
        ),
      }}/>
      <Tab.Screen name="Calendar" component={CalendarScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
};

const AuthStack = () => {
  return (
    <Stack.Navigator initialRouteName="Login">
      <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
      <Stack.Screen name="Register" component={RegisterScreen} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
};

const AppNavigator = () => {
  const { user} = useContext(UserContext);

  return (
    <Stack.Navigator>
      {user ? (
        <Stack.Screen
          name="MainTabs"
          component={MainTabs}
          options={{ headerShown: false }}
        />
      ) : (
        <Stack.Screen
          name="Auth"
          component={AuthStack}
          options={{ headerShown: false }}
        />
      )}
    </Stack.Navigator>
  );
};

const App = () => {

  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
};

export default () => (
  <UserProvider>
    <App />
  </UserProvider>
);

This is login page. I get an issue with NAVIGATOR. IT says : The action ‘NAVIGATE’ with payload {“name”:”HomeTab”} was not handled by any navigator. Do you have a screen named ‘HomeTab’? Same if I give name: “HOME” .

const LoginScreen = ({navigation}) => {
  const [identifier, setIdentifier] = useState('');
  const [password, setPassword] = useState('');
  const {login: loginContext} = useContext(UserContext);

  const handleLogin = async () => {
    try {
      const response = await login(identifier, password);
      loginContext(response.jwt); // Update context with the token
      navigation.navigate('HomeTab'); // Navigate to HomeTab in MainTabs
    } catch (error) {
      console.error('Login error:', error);
    }
  };

  useEffect(() => {
    const checkUser = async () => {
      const token = await AsyncStorage.getItem('userToken');
      if (token) {
        navigation.navigate('HomeTab');
      }
    };
    checkUser();
  }, [navigation]);

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Username or Email"
        value={identifier}
        onChangeText={setIdentifier}
        style={styles.input}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        style={styles.input}
        secureTextEntry
      />
      <Button title="Login" onPress={handleLogin} />
      <Button
        title="Register"
        onPress={() => navigation.navigate('Register')}
      />
    </View>
  );
};