React Native Drawer authentication flow

Question

I'm new in react native. I'm working on a practice project but I'm stuck to understand the concept of the authentication flow with drawer. on Login page i want to show two component in drawer(Login ,SignUp).

Once user logged in then i want to show (UserProfile,UpdateProfile,AddUser,SignOut).

I tried many solution only but no luck. Kindly guide how i can achieve this in REACT NATIVE EXPO.

APP.JS

 <NavigationContainer>
        
        <Drawer.Navigator initialRouteName="Login"  drawerContent={props => <Slidebar {...props} />}>
   
      <Drawer.Screen
       name="Login" 
       component={SignIn}
       screenOption ={{drawerlabel: ()=>null  }} />
      <Drawer.Screen name="SignUp" component={SignUp} />
      <Drawer.Screen name="Dashboard" component={UserHome} />
      <Drawer.Screen name="Create_Profile" component={CreateProfile} />
     </Drawer.Navigator>
  </NavigationContainer>

CustomDrawer.JS

function Slidebar (props) {
const auth = getAuth();
const user22 =auth.currentUser;
const {state, ...reset} =props; 
const newState = {...state};
if (user22 == null)
{newState.routes=newState.routes.filter(item => ! ['Dashboard' ,'Create_Profile'].includes((item.name)))
}
else
{
    newState.routes=newState.routes.filter(item => ! ['Login' ,'SignUp'].includes((item.name)))    
}

return(
    // state={newState} {...rest}
<DrawerContentScrollView>

<DrawerItemList state={newState} {...reset} >
</DrawerItemList>
</DrawerContentScrollView>);
}

With above solution I'm able to hide components but when i try to log in facing error:( undefined is not an object evaluating focusedRoute.key)