login form with android studio and reactive-native

I have a react-native app. And I try to login with email and password. I am using android studio for the emulator.

But the problem I am facing is that if I try to login with variables it deosn’t work. But if I do it hardcoded it works.

So this is my login form:

export const LoginScreen = ({ navigation }) => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const { onLogin, error, isLoading } = useContext(AuthContext);

    return (
        <AccountBackground>
            <AccountCover />
            <Title>Dierenwelzijn app</Title>
            <AccountContainer>
                <AuthInput
                    label="E-mail"
                    value={email}
                    textContentType="emailAddress"
                    keyboardType="email-address"
                    autoCapitalize="none"
                    onChangeText={(u) => setEmail(u)}
                />
                <Spacer size="large">
                    <AuthInput
                        label="Password"
                        value={password}
                        textContentType="password"
                        secureTextEntry
                        autoCapitalize="none"
                        onChangeText={(p) => setPassword(p)}
                    />
                </Spacer>

                {error && (
                    <Spacer size="large">
                        <Text variant="error">{error}</Text>
                    </Spacer>
                )}

                <Spacer size="large">
                    {!isLoading ? (
                        <AuthButton onPress={() => onLogin({ email, password })}>Login</AuthButton>
                    ) : (
                        <ActivityIndicator animating={false} />
                    )}
                </Spacer>
            </AccountContainer>
            <Spacer size="large">
                <AuthButton mode="contained" onPress={() => navigation.goBack()}>
                    Back
                </AuthButton>
            </Spacer>
        </AccountBackground>
    );
};

and the context:

 
 export const AuthContextProvider = ({ children }) => {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const [user, setUser] = useState(null);

    
    const onLogin = (email, password) => {      
        setIsLoading(true);
        loginRequest(email, password)
            .then((u) => {              
                setUser(u);
                setIsLoading(false);
            })
            .catch((e) => {
                setIsLoading(false);
                setError(e.toString());
            });
    };

    return (
        <AuthContext.Provider value={{ isAuthenticated: !!user, isLoading, error, user, onLogin }}>
            {children}
        </AuthContext.Provider>
    );
};

So this doesn’t work.I get this error:

Object {
  "email": Array [
    "Enter a valid email address.",
  ],
  "password": Array [
    "This field is required.",
  ],
}

But if I do:

loginRequest("[email protected]", "password")

it works.

Question: how to use the variables to login?