React Navigator, undefined is not an object - react-native

Question

Anyone know why I cant call toggleDrawer on navigation from my Header here? I assume that the navigation prop should be provided by default to Drawer.Navigator, but it seems to be undefined.
App.js
import { NavigationContainer, DefaultTheme, DrawerActions } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import HomeScreen from './screens/HomeScreen';
import Header from './components/Header';
import Background from './components/Background';
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: 'transparent',
},
};
const Drawer = createDrawerNavigator()
export default function App() {
return (
<NavigationContainer theme={theme} >
<Background />
<Drawer.Navigator initialRouteName="Home" screenOptions={{ header: () => <Header options={{headerStyle: {height: 200}}} /> }}>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Header.js
const Header = ( {navigation, route, options, back}) => {
const [fontsLoaded] = useFonts({Kanit_400Regular, Kanit_500Medium, Kanit_700Bold})
if (!fontsLoaded) return <LoadingSpinner />
return (
<View style={options.headerStyle}>
<View style={styles.headerContainer}>
<TouchableOpacity style={styles.hamburgerContainer} onPress={() => navigation.toggleDrawer()} >
<View>
<View style={styles.hamburgerLine}></View>
<View style={styles.hamburgerLine}></View>
<View style={styles.hamburgerLine}></View>
</View>
</TouchableOpacity>
</View>
)
}
When I press the hamburger menu:

Answer 1

The navigation object will be passed to a custom header by the library. However, you are not passing the props to your custom component.
You can pass the props from the library to your header component as follows.
<Drawer.Navigator initialRouteName="Home" screenOptions={{ header: (props) => <Header {...props} options={{headerStyle: {height: 200}}} /> }}>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>