How to hide the drawer header from stack's child component?

I would like to hide drawer navigation from the list component and it still be shown in the UserHomeScreen which is the stack navigation. It works if I just use the useState, hideHeader/setHideHeader, from App.js but it is not efficient way to do this. I tried my best to look for a solution but I really can't find. I am new to react native and have a limited knowledge.

Can anyone help me how am I going do it? Please help.

BTW here is the version of my drawer: ^6.0.1, if that helps.

Thank you so much!

App.js

import React from 'react'
// components
import UserHomeScreen from './src/components/user/pages/UserHomeScreen';
import Cart from './src/components/user/pages/Cart';
import Receipt from './src/components/user/pages/Receipt';
//redux
import store from './src/redux/store'
// libraries
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Provider } from 'react-redux';
const Drawer = createDrawerNavigator();
const App = () => {

  const [hideHeader, setHideHeader] = React.useState(false);

  return (
    <Provider store={store}>
      <NavigationContainer>
        {/* this hide drawer */}
        {/* options={{headerShown: false}} */}
        <Drawer.Navigator  >
          <Drawer.Screen name="Home"  >
            {() => <UserHomeScreen setHideHeader={setHideHeader} />}
          </Drawer.Screen>
          <Drawer.Screen name="Cart" component={Cart} />
          <Drawer.Screen name="Receipt" component={Receipt} />
        </Drawer.Navigator>
      </NavigationContainer>
    </Provider>
  )
}

export default App;

UserHomeScreen.js

import React from 'react'
import List from '../components/User Home Screen/List';
import { createStackNavigator } from '@react-navigation/stack';
import ItemDetails from '../components/User Home Screen/ItemDetails';
import { useNavigation } from '@react-navigation/native';
import { Button } from 'react-native';

const Stack = createStackNavigator();
const UserHomeScreen = () => {
  function backHandler(){
    navigation.navigate('List')
  }
  // this hide the drawer header but I want it inside the list
  // but if I do, the stack header that hides not the drawer header.
  // React.useEffect(() => {
  //   navigation.setOptions({
  //     headerShown: false
  //   });
  // })
  const navigation = useNavigation();
  
  return (
    
    <Stack.Navigator>
      <Stack.Screen name='List' component={List}> 
      </Stack.Screen>
      <Stack.Screen name='Item Details' component={ItemDetails} 
        options={{
          headerLeft: () => <Button title='Back' onPress={backHandler}/>
        }}
      />
    </Stack.Navigator>
  )
}

export default UserHomeScreen;