Combine custom header, top bar, and bottom bar in react navigation 5

I'm trying to show the 3 element at once when the screen is first loaded but I am unable to show the header with the button to open a drawer.

My navigation I stored in a file called Route.js

const TaskTopTab = createMaterialTopTabNavigator();
const Tab        = createMaterialBottomTabNavigator();
const Stack      = createStackNavigator();
const Drawer     = createDrawerNavigator();

function TaskTab() {
  return (
    <TaskTopTab.Navigator>
      <TaskTopTab.Screen name="TodaysTaskScreen" component={TodaysTask} options={{ tabBarLabel: "Today's Task" }} />
      <TaskTopTab.Screen name="PreviousTaskScreen" component={TodaysTask} options={{ tabBarLabel: "Previous Task" }} />
      <TaskTopTab.Screen name="UpcomingTaskScreen" component={TodaysTask} options={{ tabBarLabel: "Upcoming Task" }} />
    </TaskTopTab.Navigator>
  );
}

function BottomTabNav() {
  return (
    <Tab.Navigator 
      activeColor={ Color.default }
      barStyle={{ backgroundColor: Color.white }}>
      <Tab.Screen 
        name="TaskTab" 
        component={TaskTab} 
        options={{
          headerShown: false,
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <AntDesign name="home" color={color} size={26} />
          ),
        }} />
      <Tab.Screen 
        name="HomeScreen" 
        component={Home} 
        options={{
          headerShown: false,
          tabBarLabel: 'Menu',
          tabBarIcon: ({ color }) => (
            <AntDesign name="bars" color={color} size={26} />
          ),
        }} />
    </Tab.Navigator>
  );
}

function AppDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="BottomTabNav" component={BottomTabNav} options={{headerShown: false}} />
    </Drawer.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="AppDrawer" component={AppDrawer} options={{headerShown: true}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

The first screen loaded is TodaysTask screen and here is what I thought will work but the header still not shown.

export default function Home({ navigation }) {
    navigation.setOptions({
        headerTitle: props => <TextInput {...props} placeholder="bars" placeholderTextColor="#FFFF" style={{
            fontSize: 24
        }} />,
        headerRight: props => <AntDesign {...props} name={'bars'} size={22} color="white" style={{ marginRight: 15 }}></AntDesign>
    });

    return (
        <View>
            <Text>Today's Task</Text>
        </View>
    );
};

What I want to show

What my current app shows