Форма Formik проверяется только после второго нажатия кнопки? (Используя React Hooks, TypeScript, Formik, NextJS)

Мне просто нужна свежая пара глаз, чтобы взглянуть на мой код. Итак, проблема в том, что мой код работает и проверяет ввод данных кода в форму. Однако это происходит только после двойного нажатия кнопки отправки. После экспериментов так и не понял в чем проблема.

Кажется, что он пытается отправить вызов, который я запускаю первым (это почтовый запрос в Airtable), и после того, как этот вызов обрабатывает запрос, он затем проверяет схему.

В итоге я получаю ошибку обработки 422, если все поля еще не заполнены. Если они заполнены, следующая страница (Submit) проталкивается маршрутизатором.

Итак, я думаю, что я хочу сделать, это проверить поля формы перед отправкой. Есть идеи?

interface FormValues {
    firstName: string,
    email: string,
}

const SchedulePage: NextPage = () => {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    const postSubmit = (firstName: string, email: string) => {
        setLoading(true);
        airtableApi
            .postAirtableSchedules(firstName, email)
            .then(() => {
                setLoading(false);
                Router.push('/submitted');
            })
            .catch((err) => {
                setLoading(false);
                setError(err.message);
            });
    };

    const formik = useFormik({
        initialValues: {
            firstName: '',
            email: '',
        }, validate() {
            const errors: FormikErrors<FormValues> = {}

            // Add the touched to avoid the validator validating all fields at once
            if (formik.touched.email && !formik.values.email) {
                errors.email = "Email is required";
            }

            if (formik.touched.firstName && !formik.values.firstName) {
                errors.firstName = "First name is required";
            }

            return errors;
        },
        onSubmit: (values: any) => {
            postSubmit(values.firstName, values.email);
        },
    });
    console.info(formik.errors.email);
    return (
        <>
            <div className = "absolute w-full pt-20 bg-gray-150">
                <div className = "container flex items-center justify-center h-full mx-auto">
                    <div className = "relative flex-col items-center justify-center w-full h-full md:h-auto md:w-3/4 lg:w-2/5">
                        <div className = "flex flex-col items-center w-full h-full bg-white rounded-sm shadow-sm flex-start">
                            <div className = "flex flex-col w-full border-t border-gray-200 bg-gray-150">
                                <div className = "flex items-center justify-center w-full py-6 bg-black">
                                    <img src = {'https://ridebeyond.com/wp-content/uploads/2020/08/logo_beyond_white.png'} />
                                </div>
                                <div className = "flex items-center justify-center w-full">
                                    <Text
                                        label = "Please sign up for a meeting."
                                        marginTop = {6}
                                        marginBottom = {2}
                                    />
                                </div>
                            </div>

                            <div className = "flex flex-col items-center justify-center w-4/5 mb-10 lg:w-2/3">
                                <TextInput
                                    type = {TextInputType.TEXT}
                                    id = "firstName"
                                    name = "firstName"
                                    onChange = {(event) => {
                                        formik.handleChangeEvent(event);
                                    }}
                                    value = {formik.values.firstName}
                                    floatText = "First Name"
                                    marginTop = {1}
                                    error = {formik.errors.firstName}
                                />
                                <TextInput
                                    type = {TextInputType.EMAIL}
                                    id = "email"
                                    name = "email"
                                    onChange = {(event) => {
                                        formik.handleChangeEvent(event);
                                    }}
                                    value = {formik.values.email}
                                    floatText = "Email"
                                    marginTop = {10}
                                    error = {formik.errors.email}
                                />
                                {error && <Text label = {error} marginTop = {16} />}
                                <Button
                                    text = "Submit"
                                    marginTop = {10}
                                    marginBottom = {16}
                                    size = {ButtonSize.LG}
                                    handleClick = {formik.handleSubmit}
                                    isLoading = {loading}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default SchedulePage;

Сокращено для чистоты.