React Native: Logout delete token and get back to loginscreen - react-native

Question

I am into react native for 1 month. my goal : I want to delete my bearer token from async storage and using logout api. After pressing log out button it should go to loginscreen.
Problem I am facing when I click on logout button it throws this error
The action 'NAVIGATE' with payload {"name":"Loginpage"} was not handled by any navigator.
Do you have a screen named 'Loginpage'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
This is a development-only warning and won't be shown in production.
Result I want : When I press on logout it should go backto loginscreen and delete the bearer token
What I tried is in the Custom Drawer!
Solution : What do you guys think what is the problem here? is it because nested navigators , or I am writing the syntax wrong
This is My Auth Screen
import React, { useEffect, useState, useContext`enter code here` } from 'react'
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import Loginpage from '../../screens/Loginpage';
import AppStack from './AppStack';
import AsyncStorage from "#react-native-async-storage/async-storage";
import LoadingScreen from '../../screens/LoadingScreen';
const Stack = createNativeStackNavigator();
const AuthStack = () => {
const [isloggedin, setLogged] = useState(false)
useEffect(() => {
const token = AsyncStorage.getItem('token')
if (token) {
setLogged(true)
}
else {
setLogged(false)
}
}, [])
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
{
isloggedin == false ?
<Stack.Screen component={LoadingScreen} name="LoadingScreen" />
: isloggedin == true ?
<Stack.Screen component={AppStack} name="AppStack" />
:
<Stack.Screen component={Loginpage} name="LoginPage" />
}
</Stack.Navigator>
)
}
export default AuthStack
This is my Customer Drawer
import React from "react";
import { View, Text, ImageBackground, Image, TouchableOpacity } from "react-native";
import { DrawerContentScrollView, DrawerItemList ,NavigationActions} from '#react-navigation/drawer';
import AsyncStorage from "#react-native-async-storage/async-storage";
const CustomDrawer = (props , {navigation}) => {
const handlePressLogout = async () => {
var myHeaders = new Headers();
myHeaders.append("Authorization", AsyncStorage.clear);
var raw = "";
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
await fetch("http://mywp.flymingotech.in/Institute-Project/public/api/auth/admin/logout", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
props.navigation.navigate('Loginpage')
}
return (
<View style={{ flex: 1 }}>
<DrawerContentScrollView {...props}
contentContainerStyle={{ backgroundColor: 'orange' }}>
<ImageBackground
source={require('../assets/orange.jpg')}
style={{ padding: 30, }}>
<Image
source={require('../assets/user-profile.jpg')}
style={{ height: 80, width: 80, borderRadius: 40, marginBottom: 10, }}
/>
<Text style={{ color: 'fff', fontStyle: 'italic' }}>Mujtaba Sarwar</Text>
</ImageBackground>
<View style={{ flex: 1, backgroundColor: '#fff', paddingTop: 10 }}>
<DrawerItemList {...props} />
</View>
</DrawerContentScrollView>
<View style={{ padding: 20, borderTopWidth: 1, borderTopColor: '#ccc' }}>
<TouchableOpacity onPress={() => { }} style={{ paddingVertical: 15 }}>
<Text style={{ color: 'black' }}>Share</Text>
</TouchableOpacity>
<TouchableOpacity onPress={handlePressLogout} style={{ paddingVertical: 15 }}>
<Text style={{ color: 'black' }}>Log Out</Text>
</TouchableOpacity>
</View>
</View>
)
}
export default CustomDrawer;