Using header buttons to navigate to another screen using react-navigaton - react-native

Question

I have created a stack navigator with a header button which will be used to navigate to another screen, however I get this error when I try to goto another screen
TypeError: undefined is not an object (evaluating 'navigation.navigate')
And when I console.log(navigation) its undefined. But however when I create a button within a component & navigate to another screen it works. Its only the header buttons that are give me issues.
import {createStackNavigator} from '#react-navigation/stack';
import TabNav from './TabNavBar';
import TestingScreen from '../components/TestingScreen';
const Stack = createStackNavigator();
const NavTest = ({navigation}) => {
navigation.navigate('testingScreen');
};
const StackNavigatorContainer = () => {
return (
<Stack.Navigator>
<Stack.Screen
name={'tabNavigator'}
component={TabNav}
options={{
headerLeft: () => (
<Button title={'go to testing screen'} onPress={NavTest} />
),
}}
/>
<Stack.Screen name={'testingScreen'} component={PostInvoice} />
</Stack.Navigator>
);
};
export default StackNavigatorContainer;
I've also tried...
<Stack.Screen
name={'tabNavigator'}
component={TabNav}
options={{
headerLeft: ({navigation}) => (
<Button title={'go to testing screen'} onPress={() => navigation.navigate('testingScreen)} />
),
}}
/>
And
<Stack.Screen
name={'tabNavigator'}
component={TabNav}
options={{
headerLeft: () => (
<Button title={'go to testing screen'} onPress={({navigation}) => navigation.navigate('testingScreen)} />
),
}}
/>
``

Answer 1

To improve your understanding about my answer, I want to share my code that working well.
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const AppStack = createStackNavigator();
<NavigationContainer>
<AppStack.Navigator>
<AppStack.Screen name="Home" component={Home}
options={({ navigation }) => {
return {
headerTitleAlign: 'center',
headerMode: 'screen',
headerRight: () => (
<Button
onPress={() =>
navigation.navigate('Options')}
title="Crete Group"
color="#00f"
/>
),
}
}}
/>
<AppStack.Screen name="Options" component{Groupoptions} />
</AppStack.Navigator>
</NavigationContainer>
I hope this code help you surely.