Adding Custom header in react-navigation 5 - reactjs

Question

I know how to implement header in navigation 3, but I'm having trouble passing the navigation to my header component in version 5.
(HomeStack.js)
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { Button } from 'react-native';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';
import Header from '../shared/header';
const Stack = createStackNavigator()
export default Navigator = () => {
return (
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
<Stack.Screen
name='Home'
component={Home}
options={{
headerTitle: ({navigation}) => <Header navigation={navigation}/>
}}
/>
<Stack.Screen name='ReviewDetails' component={ReviewDetails} />
</Stack.Navigator>
)
}
(header.js)
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { MaterialIcons } from '#expo/vector-icons';
export default function Header({ navigation }) {
const openMenu = () => {
navigation.openDrawer();
}
return (
<View style={styles.header}>
<MaterialIcons name='menu' size={28} onPress={openMenu} style={styles.icon}/>
<View>
<Text style={styles.headerText}>GameZone</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
header: {
width: '100%',
height: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
headerText: {
fontWeight: 'bold',
fontSize: 20,
color: '#333',
letterSpacing: 1,
},
icon: {
position: 'absolute',
left: 16
}
});
I think the only problem is how to pass the navigation var. to the header component in order to open and close the drawer. I am struggling with this problem. Your help is appreciated.