How to make Drawer Screens in Navigator appear dynamically in react native?

I am trying to make a Drawer Screen Tab appear dynamically according to a redux state value but this practice is not good as when I change the value of redux state, the whole component remounts because React doesn't allow or suggest dynamic navigation and says that all Screens must be rendered permanently without using any dynamic logic with it.

I am using here StudentInfoData which is a redux state for dynamic screen rendering but this method is a failure in itself. What to do with it so that I can achieve my desired UI

ChatGPT said to make it invisible using styling properties and let it exist in Drawer Tab physically but even that method will also require declaring StudentInfoData which is a redux state in App.tsx where whole navigation rendering is present and this thing will cause un-necessary remounting during change of value of StudentInfoData.

function App(): React.JSX.Element {
function DrawerNav() {
    return (
    // <Drawer.Navigator initialRouteName={TrialValidity() == false? "SubscriptionDrawer" : "TabsDrawer"}
    <Drawer.Navigator initialRouteName={"TabsDrawer"}
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      screenOptions={{
      drawerStyle: {
        backgroundColor: '#111827',
        width: 240,
      },
      // drawerActiveTintColor: '#22d3ee',
      drawerActiveTintColor: '#a150f3',
      drawerInactiveTintColor: '#9ca3af',
      drawerLabelStyle: {
        fontSize: 16,
        fontFamily: Platform.OS === 'ios' ? 'SFProDisplay-Bold' : 'sf-pro-display-bold'
      },
    }}
    >
      <Drawer.Screen name="TabsDrawer" component={Tabs} options={{ headerShown: false, title: "Schedule"}}/>
      {/* <Drawer.Screen name="SettingsDrawer" component={Settings} options={{ headerShown: false, title: "Settings"}}/> */}
      <Drawer.Screen name="PartneredLibrariesDrawer" component={PartneredLibraries} options={{ headerShown: false, title: "Partnered Libraries"}}/>
      <Drawer.Screen name="SubscriptionDrawer" component={Subscription} options={{ headerShown: false, title: "Subscription"}}/>
      { (StudentInfoData?.["Type of Account"] == "Distributor" || StudentInfoData?.["Type of Account"] == "Admin") &&
      <Drawer.Screen name="AppDistributorDrawer" component={AppDistributor} options={{ headerShown: false, title: "App Distributor"}}/>
      }
      { StudentInfoData?.["Type of Account"] == "Admin" &&
      <Drawer.Screen name="AdminPanelDrawer" component={AdminPanel} options={{ headerShown: false, title: "Admin Panel"}}/>
      }
    </Drawer.Navigator>
    )
  }

return (
    <NavigationContainer>
 <NativeStack.Navigator initialRouteName={"DrawerScreens"}>
        <NativeStack.Screen name="StackScreens" component={StackScreen} options={{ headerShown: false, animation:'slide_from_left' }}/>
        <NativeStack.Screen name="DrawerScreens" component={DrawerNav} options={{ headerShown: false }}/>
      </NativeStack.Navigator>
    </NavigationContainer>
  );
}