Can’t hide bottom navigation bar inside nested stack navigator that is nested inside Drawer Navigator react navigation v6

I have a DrawerNavigator. Inside which are multiple screens and one of which (Initial Home screen) is a Bottom Tab Navigator which further have Stack navigators in each tab. I am unable to hide the bottom navigation bar of the Tab navigator while I am inside the details screen of a tab i.e. stack navigator. How can I achieve this?

DrawerNavigator

<Navigator
  backBehavior="history"
  drawerContent={(props) => (
    <DrawerContent {...props} isArabic={isArabic} keyData={keyData} />
  )}
  screenOptions={{
    drawerPosition: isArabic ? "right" : "left",
    animation: "fade",
    headerShown: false,
    drawerType: "slide",
    overlayColor: "transparent",
    drawerStyle: {
      backgroundColor: "#2F2F2F",
      width: "84%",
    },
  }}
>
  <Screen
    name={Routes.HOME_SCREEN}
    component={BottomNavigator}
    options={{ headerShown: false }}
  />
  <Screen
    name={Routes.X_HOME_SCREEN}
    component={XNavigator}
    options={{ headerShown: false, unmountOnBlur: true }}
  />
  <Screen
    name={Routes.Y_SCREEN}
    component={YScreen}
    options={{ headerShown: false }}
  />
</Navigator>

BottomNavigator

<Navigator
  barStyle={[
    styles.barStyle(insets),
    { transform: [{ scaleX: isArabic ? -1 : 1 }] },
  ]}
  activeColor={white}
  keyboardHidesNavigationBar={false}
  inactiveColor={white}
  screenOptions={{ animation: "fade" }}
>
  <Screen
    options={{
      headerShown: false,
    }}
    name={Routes.DASHBOARD}
    component={Dashboard}
  />
  <Screen
    name={Routes.A_NAVIGATOR}
    component={ANavigator}
    options={{
      headerShown: false,
      }}
  />
  <Screen
    name={Routes.B_Navigator}
    component={BNavigator}
    options={{
      headerShown: false,
      }}
  />
  <Screen
    name={Routes.C_Navigator}
    component={CNavigator}
    options={{
      headerShown: false,
      }}
  />
  <Screen
    name={Routes.D_NAVIGATOR}
    component={DNavigator}
    options={{
      headerShown: false,
    }}
  />
</Navigator>

Each Navigator inside the BottomNavigator is like this

<Navigator screenOptions={{ animation: "fade" }}>
  <Screen
    name={Routes.A_SCREEN}
    component={AScreen}
    options={{ headerShown: false }}
    initialParams={route?.params}
  />
  <Screen
    name={Routes.B_SCREEN}
    component={BScreen}
    options={{ headerShown: false }}
  />
</Navigator>

I need the bottom tab bar in AScreen but don’t need in BScreen. However, React Navigation is not allowing me to do so or I am missing something. Regards