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

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>
                  ),
                })}