I'm encountering a problem when trying to set up a 'nested/nesting' build in react native

Question

To see the drawer structure on every screen and I want to see the homepage and choose page in the tabs navigation section. For this, I set up a structure like the one below. However, while I can navigate to the correct pages in the drawer with each navigation but I cannot do this in the tabs section. For example, when I go to the settings page from the drawer section, homepage and choose appear in the tabs section, but when I click on homepage, I still stay in the settings. How can I fix this. This is my first question in Stack Overflow. Please forgive me if ] am wrong in the format.(and I know the names can't be the same but I'll fix that later)

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

const Stacks = ()=> {
  return (
<Stack.Navigator options={{headerStyle: {
    backgroundColor: 'black'
} }}>
<Stack.Screen name="HomePage" component={Home} options={{headerShown:false}}></Stack.Screen>
  <Stack.Screen name="Chooseym" component={Chooseym} options={{headerShown:false}}></Stack.Screen>
  <Stack.Screen name="NotificationSettings" component={NotificationSettings} options={{headerShown:false}}></Stack.Screen>
  <Stack.Screen name="Movievs" component={Movievs} options={{headerShown:false}}></Stack.Screen>
  <Stack.Screen name="Splash" component={Splash} options={{headerShown:false}}></Stack.Screen>
</Stack.Navigator>
  )
}
const Stacks2 = ()=> {
  return (
<Stack.Navigator options={{headerStyle: {
              backgroundColor: 'black'
} }}>
<Stack.Screen name="Chooseym" component={Chooseym} options={{headerShown:false}}></Stack.Screen>
  <Stack.Screen name="HomePage" component={Home} options={{headerShown:false}}></Stack.Screen>
</Stack.Navigator>

  )
}

const Stacks3 = ()=> {
  return (
<Stack.Navigator options={{headerStyle: {
              backgroundColor: 'black'
} }}>
<Stack.Screen name="Movie" component={Movievs} options={{headerShown:false}}></Stack.Screen>
  <Stack.Screen name="HomePage" component={Home} options={{headerShown:false}}></Stack.Screen>
</Stack.Navigator>
  )
}

const Stacks4 = ()=> {
  return(
<Stack.Navigator options={{headerStyle: {
    backgroundColor: 'black'
} }}>
  <Stack.Screen name="Settings" component={NotificationSettings} options={{headerShown:false}}></Stack.Screen>
  <Stack.Screen name="HomePage" component={Home} options={{headerShown:false}}></Stack.Screen>
  <Stack.Screen name="Chooseym" component={Chooseym} options={{headerShown:false}}></Stack.Screen>
</Stack.Navigator>
  )
}

const Tabs =() => {
  return(
    <Tab.Navigator screenOptions={{tabBarActiveTintColor: "#eec60e",
      tabBarInactiveTintColor: "white" ,
      tabBarStyle:{backgroundColor:"#2b2b2b"}}}>
      <Tab.Screen name="HomePage" component={Stacks} options={{headerShown:false}}></Tab.Screen>
      <Tab.Screen name="Chooseym" component={Chooseym} options={{headerShown:false}}></Tab.Screen>
    </Tab.Navigator>
  )
}

const Tabs2 =() => {
  return(
    <Tab.Navigator screenOptions={{tabBarActiveTintColor: "#eec60e",
      tabBarInactiveTintColor: "white" ,
      tabBarStyle:{backgroundColor:"#2b2b2b"}}}>
        <Tab.Screen name="HomePage" component={Stacks2} options={{headerShown:false}}></Tab.Screen>
      <Tab.Screen name="Chooseym" component={Chooseym} options={{headerShown:false}}></Tab.Screen>
    </Tab.Navigator>
  )
}

const Tabs3 =() => {
  return(
    <Tab.Navigator screenOptions={{tabBarActiveTintColor: "#eec60e",
      tabBarInactiveTintColor: "white" ,
      tabBarStyle:{backgroundColor:"#2b2b2b"}}}>
        <Tab.Screen name="HomePage" component={Stacks3} options={{headerShown:false}}></Tab.Screen>
      <Tab.Screen name="Chooseym" component={Chooseym} options={{headerShown:false}}></Tab.Screen>
    </Tab.Navigator>
  )

}

const Tabs4 =() => {
  return(
    <Tab.Navigator screenOptions={{tabBarActiveTintColor: "#eec60e",
      tabBarInactiveTintColor: "white" ,
      tabBarStyle:{backgroundColor:"#2b2b2b"}}}>
        <Tab.Screen name="HomePage" component={Stacks4} options={{headerShown:false}}></Tab.Screen>
      <Tab.Screen name="Chooseym" component={Chooseym} options={{headerShown:false}}></Tab.Screen>

    </Tab.Navigator>
  )
}

const App=() => {
  return (

    <NavigationContainer>
      <Drawer.Navigator  screenOptions={{ headerTintColor: "#eec60e", headerStyle :{backgroundColor:"#2b2b2b"},headerTitleStyle: {fontWeight: 'bold' ,fontFamily:"serif",color:"#eec60e"},
    drawerStyle: {
      backgroundColor: '#2b2b2b',
    },
  }}>
      <Drawer.Screen name="HomePage" component={Tabs} options={{title:"HomePage ecs" , drawerActiveBackgroundColor:"#eec60e" , drawerActiveTintColor:"#2b2b2b", drawerInactiveTintColor:"white"}}></Drawer.Screen>
        <Drawer.Screen name="Chooseym" component={Tabs2} options={{title:"ChooseYM" , drawerActiveBackgroundColor:"#eec60e" , drawerActiveTintColor:"#2b2b2b", drawerInactiveTintColor:"white"}}></Drawer.Screen>
        <Drawer.Screen name="Movievs" component={Tabs3} options={{title:"Movie" , drawerActiveBackgroundColor:"#eec60e" , drawerActiveTintColor:"#2b2b2b", drawerInactiveTintColor:"red", drawerInactiveTintColor:"white"}}></Drawer.Screen>
        <Drawer.Screen name="NotificationSettings" component={Tabs4} options={{title:"Settings" , drawerActiveBackgroundColor:"#eec60e" , drawerActiveTintColor:"#2b2b2b" , drawerInactiveTintColor:"white"}}></Drawer.Screen>
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;