React Navigation, React native, Nested Navigator, Want to Navigate to root of stack

Question

I have a nested navigator, Drawer navigator then stack navigator, When user is on a screen on the home stack, other than the root screen of the home stack, when user opens drawer and click on Home, it should redirect to the root of the home stack. How can I achieve this?

Below is code for my drawer navigator and Home stack

drawer:

import {
  createDrawerNavigator,
  DrawerItemList,
} from "@react-navigation/drawer";
import Bg from "../../assets/background.png";
import { NavigationContainer } from "@react-navigation/native";
import Home from "../screens/home";
import { ImageBackground, SafeAreaView, Text, View } from "react-native";
import HomeStack from "./homeStack";
import { SafeAreaProvider } from 'react-native-safe-area-context';
import SongStack from "./songStack";
import SearchStack from "./searchStack";
import ContactUsStack from "./contactUsStack";
import HelpStack from "./helpStack";
import VolunteerStack from "./volunteerStack";



const CustomDrawerContentComponent = (props) => (
  <ImageBackground style={{ flex: 1, resizeMode: "cover" }} source={Bg}>
    <View
      style={{
        backgroundColor: "rgba(59, 82, 88,0.65)",
        width: "100%",
        height: "100%",
      }}
    >
      <SafeAreaView>
        <View style={{ height: "10%" }}></View>
        <DrawerItemList {...props} />
      </SafeAreaView>
      <Text
        style={{ position: "absolute", bottom: 1, left: 1, color: "#ffffff" }}
      >
        Copyright © Songs Of Zion v4.1.1 {new Date().getFullYear()}
      </Text>
    </View>
  </ImageBackground>
);

const Drawer = createDrawerNavigator();

export default function Draweri() {
  return (
<SafeAreaProvider>
    <NavigationContainer>
      <Drawer.Navigator
        drawerContent={(props) => <CustomDrawerContentComponent {...props} />}
        screenOptions={{
            unmountOnBlur:true,
          headerShown: false,
          drawerItemStyle: {
            borderColor: "white",
            borderBottomWidth: 1.5,
          },
          drawerActiveTintColor: "#ffffff",
          drawerInactiveTintColor: "#ffffff",
          drawerActiveBackgroundColor: "rgba(59, 82, 88,0.7)",
          drawerLabelStyle: {
            fontSize: 18,
            marginLeft: 20,
            marginTop: 20,
            marginBottom: 20,
          },
        }}
      >
          <Drawer.Screen name="DHome" options={{title:"Home"}} component={HomeStack} />
          <Drawer.Screen name="Song" component={SongStack} />
          <Drawer.Screen name="Search" options={{unmountOnBlur: true}} component={SearchStack} />
          <Drawer.Screen name="ContactUs"options={{title:"Contact Us"}} component={ContactUsStack} />
          <Drawer.Screen name="Help" component={HelpStack} />
          <Drawer.Screen name="Volunteer" component={VolunteerStack} />

      </Drawer.Navigator>
    </NavigationContainer>
    </SafeAreaProvider>
  );
}

Home Stack:

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "../screens/home";
import SearchResults from "../shared/screens/search/searchResults";
import Header from "../shared/header";
import Search from "../screens/search";
import Sync from "../screens/home/sync";
import Song from "../shared/screens/song";



const Stack = createNativeStackNavigator();

export default function HomeStack(navigation) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={Home}
        options={{ headerShown: false }}
      />
        <Stack.Screen name="SearchResults" component={SearchResults} options={{header: ({navigation}) => <Header navigation={navigation} title={"Search Results"} pop={true}  />}}/>
        <Stack.Screen name="SongLyrics" component={Song} options={{header: ({navigation}) => <Header navigation={navigation} title={"Song Lyrics"} pop={true} replace={true} />}}/>
        <Stack.Screen name="Search" component={Search} options={{header: ({navigation}) => <Header navigation={navigation} title={"Search"} pop={true}/>}}/>
        <Stack.Screen name="BookSongLyrics" component={Song} options={{header: ({navigation}) => <Header navigation={navigation} title={"Song Lyrics"} pop={true}/>}}/>

        <Stack.Screen name="Sync" component={Sync}         options={{ headerShown: false }}

        />
    </Stack.Navigator>
  );
}

I have tried:

 <Drawer.Screen
        name="Home"
        component={HomeStack}
        options={{
          drawerLabel: 'Home',
          // This will be called when the home button is pressed in the drawer
          onPress: ({ navigation }) => {
            // Reset the home stack to the 'Home' screen
            navigation.reset({
              index: 0,
              routes: [{ name: 'Home' }],
            });
          },
        }}
      />

....

function Home({ navigation }) {
  useFocusEffect(
    React.useCallback(() => {
      // Reset the home stack to the 'Home' screen when the 'Home' screen becomes the focused screen
      navigation.reset({
        index: 0,
        routes: [{ name: 'Home' }],
      });
    }, [navigation])
  );

  // Other component code
}

...

function App() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="DHome"
        component={HomeStack}
        options={{
          title: 'Home',
          // This will be called when the home button is pressed in the drawer
          onPress: ({ navigation }) => {
            // Navigate to the Home screen
            navigation.navigate('Home');
          },
        }}
      />
      {/* Other screens in the drawer navigator */}
    </Drawer.Navigator>
  );
}

...

const CustomDrawerContentComponent = (props) => {
  const { navigation } = props;

  return (
    <View>
      <DrawerItemList
        {...props}
        onItemPress={({ route, focused }) => {
          if (route.name === 'DHome') {
            // Navigate to the root screen of the home stack when the home button is pressed
            navigation.navigate('Home');
          } else {
            // Navigate to the pressed screen for other buttons
            navigation.navigate(route.name);
          }
        }}
      />
    </View>
  );
};

const Drawer = createDrawerNavigator();

function App() {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContentComponent {...props} />}
    >
      <Drawer.Screen name="DHome" component={HomeStack} />
      {/* Other screens in the drawer navigator */}
    </Drawer.Navigator>
  );
}

...

import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

function MyDrawer({ navigation }) {
  return (
    <NavigationContainer
      onNavigationStateChange={(prevState, currentState) => {
        const currentRouteName = currentState.routes[currentState.index].name;

        if (currentRouteName === 'Home') {
          // Navigate to the root screen of the home stack when the home button is pressed
          navigation.navigate('Home');
        } else {
          // Navigate to the pressed screen for other buttons
          navigation.navigate(currentRouteName);
        }
      }}
    >
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeStack} />
        <Drawer.Screen name="Song" component={SongStack} />
        <Drawer.Screen name="Search" component={SearchStack} />
        <Drawer.Screen name="ContactUs" component={ContactUsStack} />
        <Drawer.Screen name="Help" component={HelpStack} />
        <Drawer.Screen name="Volunteer" component={VolunteerStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}