the home button in the drawer is not working but the one on the bottom tab is working well

Question

This is the App.js when I change the home name in the navigator it works well

    <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}><Drawer.Screen 
     options={{
      headerShown: false
    }}
    name='Home' component={MainTabScreen} />
    
    {/* <Drawer.Screen name="Products" component={Products} /> */}
  </Drawer.Navigator>
 
</NavigationContainer>`

here is the Drawer.js which has the home button which isn't responding

`<Drawer.Section style={styles.drawerSection}><DrawerItem 
                        icon={({color, size}) => (
                            <Icon 
                            name="home-outline" 
                            color={color}
                            size={size}
                            />
                        )}
                        label="Home"
                        onPress={() => {props.navigation.navigate('Home')}}
                    />
                    <DrawerItem />`

and finally the mainTab js

const MainTabScreen = () => (
<Tab.Navigator
  initialRouteName="Home"
  activeColor="#fff"
>
  <Tab.Screen
    name="Home"
    component={HomeStackScreen}
    options={{
      tabBarLabel: 'Home',
      tabBarColor: '#009387',
      tabBarIcon: ({ color }) => (
        <Icon name="home" color={color} size={26} />
      ),
    }}
  />

Answer 1

Try below code

<Drawer.Section style={styles.drawerSection}>
      <DrawerItem 
        icon={({color, size}) => (
            <Icon 
            name="Home" 
            color={color}
            size={size}
            />
        )}
        label="Home"
        onPress={() => {props.navigation.navigate('Home')}}
      />
    <Drawer.Section />