navigation.navigate() doesn't work on my nested navigations - react-native

Question

Here I'am testing with react navigation v6.
When I press "Go To Log-In" button,
it prints "navigation.navigate is not a function.
Here is my Main Navigation
const DrawerNavigator = () => {
return (
<Drawer.Navigator>
<Drawer.Screen name="User" component={MainStackNavigator} />
<Drawer.Screen name="Notification" component={BottomTabNavigator}
options={ { headerTitle: props => <LogoTitle {...props} /> }}
/>
</Drawer.Navigator>
);
};
here is my one of my nested Navigation
const MainStackNavigator = () => {
return (
<Stack.Navigator screenOptions={screenOptionStyle}>
<Stack.Screen name="Item" component={Items} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="LogIn" component={LogIn} />
<Stack.Screen name="Detail" component={Detail} />
</Stack.Navigator>
);
};
const ContactStackNavigator = () => {
return (
<Stack.Navigator screenOptions={screenOptionStyle}>
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
);
};
Here is my Log in Button in a component named "Items"
export default function Items(navigation) {
useEffect(() => {
console.log("ITem navi: ", navigation);
}, [])
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Items !</Text>
<Button title="Go to Log-In" onPress={() => navigation.navigate('LogIn')} />
<AccountList />
</View>
);
}
I'am stuck in this error for hours.
Please help me to solve it.

Answer 1

You are accessing it the wrong way
this line
export default function Items(navigation) {
Should be
export default function Items({navigation}) {
Basically you will get all the props as a single parameter which you can destruct and access the navigation prop

Answer 2

In your code complier don't know what is navigation so you need wrap that in porps params like below
export default function Items({navigation}) {