Hide Drawer Navigator Header inside Stack Navigator (Stack + Drawer)

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;

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