Stack navigator header button doesn't navigate to route on press - react-native

Question

Here is my error: undefined is not an object (evaluating 'navigation.navigate')
My goal is to navigate to my Settings page when on click on my LeftHeader component in my StackNavigator:
Here is a snippet of my App.js file:
const FeedStackNav = () => {
return (
<Stack.Navigator>
<Stack.Screen
options={{
title: "",
headerLeft: ({ navigation }) => (
<Header>
<LeftHeader onPress={() => navigation.navigate("Settings")}>
<MenuIcon fill={"#C13B1E"} />
</LeftHeader>
</Header>
),
}}
name="Feed"
component={Feed}
/>
</Stack.Navigator>
);
};
And here is how I am rendering the Stack in my app:
<NavigationContainer theme={theme}>
<Stack.Navigator>
<Stack.Screen
options={{
headerShown: false,
}}
name=" "
component={TabNav}
/>
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
There has to be something wrong with my LeftHeader onPress function

Answer 1

Am adding just snippet of code to illustrate how to use navigation.navigate('screen') on header button
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<Stack.Screen
name="Home"
component={HomeScreen}
options={({navigation, route}) => ({
headerRight: () => (
<TouchableOpacity onPress={() => alert('Just clicked!!')}>
<FontIcon
onPress={() => navigation.navigate('CreateSession')}
name="video-camera"
color={whitish}
size={25}
/>
</TouchableOpacity>
),
})}
/>
<Stack.Screen name="CreateSession" component={CreateSessionScreen} />
<Stack.Screen name="LiveSessions" component={LiveSession} />
</Stack.Navigator>
</NavigationContainer>
on above code observe the callback function used to get access to navigation and route props
options={({navigation, route}) => ({
headerRight: () => (
<TouchableOpacity onPress={() => alert('Just clicked!!')}>
<FontIcon
onPress={() => navigation.navigate('CreateSession')}
name="video-camera"
color={whitish}
size={25}
/>
</TouchableOpacity>
),
})}