React Hook Form delayed on submit

Question

I'm having some problems with react hook form, when submitting the form it takes a good ~5 seconds for the onSignIn function to be called and for the loading spinner to be shown. I can't see any reason why, as it works on similar screens such as registration. This is an expo app with tamagui components. If I remove the logic from the onSignIn function, the console log is displayed instantly

export function SignInScreen() {
    const {
        control,
        handleSubmit,
        setError,
        formState: { errors, isSubmitting },
    } = useForm<EmailPassword>({
        defaultValues: {
            email: '',
            password: '',
        },
        resolver: zodResolver(signInSchema),
    });
    const [isLoading, setIsLoading] = useState(false);
    const { signIn, setCredentials } = useAuth();
    const router = useRouter();

    const onSignIn = async (data: EmailPassword) => {
        console.log('start onSignIn');
        try {
            await signIn(data.email, data.password, true);
        } catch (error) {
            if (error instanceof Error) {
                switch (error.name) {
                    case 'UserNotConfirmedException':
                        setCredentials({ username: data.email, password: data.password });
                        router.push('/(auth)/verify');
                        break;

                    case 'UserNotFoundException':
                        setError('email', {
                            message: 'This email address is not registered',
                            type: 'onChange',
                        });
                        break;

                    case 'NotAuthorizedException':
                        setError('password', {
                            message: 'Incorrect credentials',
                        });
                        break;

                    default:
                        setError('password', {
                            message: 'An unknown error occurred',
                        });
                }
            }
        } finally {
            console.log('end onSignIn');
            return;
        }
    };

    return (
        <Layout>
            <Controller
                control={control}
                render={({ field: { onChange, onBlur, value } }) => (
                    <IconInput
                        placeholder="Email address"
                        onBlur={onBlur}
                        onChangeText={onChange}
                        value={value}
                        keyboardType="email-address"
                        returnKeyType="next"
                        width="100%"
                        autoComplete="email"
                        autoCapitalize="none"
                        icon={<Mail size={'$1'} color="$gray8" />}
                    />
                )}
                name="email"
            />
            {errors.email && <Paragraph color="$red10">{errors.email.message}</Paragraph>}

            <Controller
                control={control}
                rules={{
                    maxLength: 100,
                }}
                render={({ field: { onChange, onBlur, value } }) => (
                    <IconInput
                        placeholder="Password"
                        onBlur={onBlur}
                        onChangeText={onChange}
                        value={value}
                        secureTextEntry
                        width="100%"
                        autoComplete="password"
                        autoCapitalize="none"
                        icon={<Lock size={'$1'} color="$gray8" />}
                    />
                )}
                name="password"
            />
            {errors.password && <Paragraph color="$red10">{errors.password.message}</Paragraph>}

            <Button
                width="100%"
                themeInverse
                fontSize="$button"
                onPress={handleSubmit(onSignIn)}
                iconAfter={isSubmitting ? () => <Spinner /> : undefined}
            >
                Sign in
            </Button>
            <Button onPress={() => router.push('/(auth)/forgot-password')} chromeless>
                Forgot Password?
            </Button>
        </Layout>
    );
}