I have two users admin and user and each user has different screens to view based on the condition, I was trying to make each user login and view the right screens but the conditional is not working and the user can’t login even

login screen

const SignIn = ({navigation}) => {

    function handleSignIn () {
      
        const auth = getAuth(app);
       
        signInWithEmailAndPassword (auth, email, password)
        .then(()=>{
          // don't know what to do here 
        })
        .catch(error => {
       //   setLoading(false);
          Alert.alert('Incorrect', error.message);
        });   
       
    }



    function  renderFooter () {
        return(
            <View>
           
            <Text>Sign In</Text>

           <TouchableOpacity onPress={()=>handleSignIn()}>
           
           </TouchableOpacity>
           
            

         
        </View>
        )
    }
}

App Screen

const App = () => {

  const auth = getAuth (app);
  const [user, setUser] = React.useState('') // This user
  const [isLoggedIn, setIsLoading] = React.useState(false)

 

  React.useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(async user => {
        if (user) {
          const userDocRef = doc(db, "users", user.uid);
          const userDocSnap = await getDoc(userDocRef);
          
            setUser(userDocSnap.data());
            
         } else {
          setUser(null);
          }   
        
    });
    return () => unsubscribe();
}, [])




  
if(isLoggedIn){
  {user.role === 'admin' ? 
    
      <NavigationContainer>
        <Stack.Group>
        <Stack.Screen options={{headerShown:false}} name='loading' component={Loading} />
        </Stack.Group>
      </NavigationContainer>
    
    : 
         
          <NavigationContainer>
            <Stack.Group>
            <Stack.Screen  options={{headerShown:false}} name='userLoading' component={UserLoading} />
            </Stack.Group>
          </NavigationContainer>
         
      }
}


return (
<NavigationContainer>
 <Stack.Navigator>
          <Stack.Screen options={{headerShown:false}} name="Splash" component={Splash} />
          <Stack.Screen options={{headerShown:false}} name="SignIn" component={SignIn} /> 
          <Stack.Screen options={{headerShown:false}} name="SignUp" component={SignUp} />
          <Stack.Screen options={{headerShown:false}} name="AdminScreens" component={AdminScreens} />
          <Stack.Screen options={{headerShown:false}} name="UserScreens" component={Tabs} />


 </Stack.Navigator>
</NavigationContainer>
)
      
}



export default App;

I want every user login based on the role if the role is admin the admin screens should display up and if the role not equal to admin the user should login normally to the user screens. Right Now I can’t even login at all because I should do some codes inside the handleSignIn function and I don’t know what I should write. Any help is highly appreciated