Hide Drawer Navigator Header inside Stack Navigator (Stack + Drawer) - react-native

Question

I am having an issue with duplicate headers and answers provided on stack overflow have not helped.
This is what I have tried, can anyone suggest a solution? I know I do not need all properties, but this is for the sake of demonstration of what did not help.
The header you are seeing on the screenshots comes from the screen component itself.
const Drawer = createDrawerNavigator();
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Logout" onPress={() => store.dispatch(logOut())} />
</DrawerContentScrollView>
);
}
const DrawerNavigator = () => {
return (
<Drawer.Navigator
screenOptions={{
headerShown: false,
unmountOnBlur: true,
headerTitle: false,
header: () => null,
}}
navigationOptions={{
headerMode: 'none',
headerVisible: false,
header: () => null,
}}
initialRouteName={Routes.Home}
drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name={Routes.Home} component={Home} />
<Drawer.Screen name={Routes.Locations} component={Locations} />
</Drawer.Navigator>
);
};
const Stack = createStackNavigator();
const Authenticated = () => {
return (
<Stack.Navigator initialRouteName="Nata">
<Stack.Screen
name="Drawer"
screenOptions={{
headerShown: false,
headerTitle: false,
}}
navigationOptions={{
headerMode: 'none',
headerVisible: false,
header: () => null,
}}
component={DrawerNavigator}
/>
<Stack.Screen name={Routes.AddLocation} component={AddLocation} />
</Stack.Navigator>
);
const Home = ({navigation}) => {
return (
<SafeAreaView style={[globalStyle.bgWhite, globalStyle.flex]}>
<Header
title={'Home'}
onLeftIconPress={() => navigation.goBack()}
onRightIconPress={() => navigation.toggleDrawer()}
/>
<ScrollView
style={[globalStyle.flex]}
contentContainerStyle={[
globalStyle.containerHorizontalPadding,
globalStyle.contentVerticalPadding,
]}
showsVerticalScrollIndicator={false}>
<View>
<Text>Home</Text>
</View>
</ScrollView>
</SafeAreaView>
);
};
export default Home;

Answer 1

This worked - thanks to everyone who took a look and here is a solution if anyone is looking for one still.
const DrawerNavigator = () => {
return (
<Drawer.Navigator
screenOptions={{
header: () => null,
}}
initialRouteName={Routes.Home}
drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name={Routes.Home} component={Home} />
<Drawer.Screen name={Routes.Locations} component={Locations} />
</Drawer.Navigator>
);
};
const Stack = createStackNavigator();
const Authenticated = () => {
return (
<Stack.Navigator
screenOptions={{
header: () => null,
headerShown: false,
}}
initialRouteName="Nata">
<Stack.Screen name="Drawer" options={{}} component={DrawerNavigator} />
<Stack.Screen name={Routes.AddLocation} component={AddLocation} />
</Stack.Navigator>
);
};