useFormik formik.errors is empty object

[alisaMedved]

I use formik and formik-antd

expected: formik.errors will contain field errors result: When I use useFormik formik.errors = {}

This code work and formik.errors contain field errors

`import React, {useEffect, useState} from 'react'; import {Spin, Typography} from "antd"; import styles from "./SettingPage.module.scss" import {Form, FormItem, Input, SubmitButton, ResetButton} from "formik-antd"; import {validateName} from "../authPage/utils"; import {Formik, FormikState} from "formik"; import {FormNameType} from "./SettingPage.types"; import {changeNameThunk} from "../../redux/slices/userSlice"; import {useDispatch, useSelector} from "react-redux"; import {RootState} from "../../redux/store"; import classNames from "classnames/bind";

let cx = classNames.bind(styles); const { Text } = Typography;

export const SettingPage = () => { const [formName, setFormName] = useState<FormNameType | null>(null); const [flagLoading, setFlagLoading] = useState(false);

const { flagChangeName, firstName, lastName} = useSelector((state: RootState) => state.UserReducer);

const dispatch = useDispatch();


useEffect(() => {
    if (formName !== null) {
        dispatch(changeNameThunk(formName))
    }

}, [formName]);

useEffect(() => {
    if (flagChangeName === "ok" || "error") {
        setFlagLoading(false);
    }
}, [flagChangeName]);

const handleSubmitName = (formData: FormNameType): void => {
    if (formData !== null) {
        if (formData.firstName !== firstName || formData.lastName !== lastName) {
            setFlagLoading(true);
            setFormName(formData);
        } 
    } else {
        setFlagLoading(true);
        setFormName(formData);
    }
};


return (
    <div className={styles.SettingPageContainer}>
        <div>
            <div>
                <Formik
                    initialValues={{
                        //@ts-ignore
                        firstName: firstName,
                        //@ts-ignore
                        lastName: lastName,
                    }}
                    onSubmit={(values, { setSubmitting }) => {
                        const userData = {
                            firstName: values.firstName.trim(),
                            lastName: values.lastName.trim(),
                        };
                        handleSubmitName(userData);
                        setSubmitting(false);
                    }}
                >
                    {({ errors, touched, values, submitForm, isSubmitting, resetForm }) => (<Form>
                        <FormItem validate={validateName} name="firstName">
                            <Input
                                className={cx({
                                    TextField: true,
                                    TexfieldFilledNonError: values.firstName.length !== 0 && !errors.firstName,
                                    TextFieldError: errors.firstName && touched.firstName
                                })}
                                name="firstName"
                                placeholder="Ваше Имя"
                            />
                        </FormItem>
                        <div
                            className={cx({
                                ValidatorsWrap: true,
                                ValidatorsWrapPlain: errors.firstName && touched.firstName,
                                ValidatorsWrapNone: !(errors.firstName && touched.firstName)
                            })}>
                            {errors.firstName && touched.firstName && (
                                <Text
                                    className={styles.DangerText}>
                                    {errors.firstName}
                                </Text>
                            )}
                        </div>
                        <FormItem validate={validateName} name="lastName">
                            <Input
                                className={cx({
                                    TextField: true,
                                    TexfieldFilledNonError: values.lastName.length !== 0 && !errors.lastName,
                                    TextFieldError: errors.lastName && touched.lastName
                                })}
                                name="lastName"
                                placeholder="Ваша Фамилия"
                            />
                        </FormItem>
                        <div
                            className={cx({
                                ValidatorsWrap: true,
                                ValidatorsWrapPlain: errors.lastName && touched.lastName,
                                ValidatorsWrapNone: !(errors.lastName && touched.lastName)
                            })}>
                            {errors.lastName && touched.lastName && (
                                <Text
                                    className={styles.DangerText}>
                                    {errors.lastName}
                                </Text>
                            )}
                        </div>
                        <SubmitButton
                            type="primary"
                            htmlType="submit"
                            className={styles.btn}
                            onClick={submitForm}
                            disabled={flagLoading}>
                            <Text className={styles.btnText}>Сохранить</Text>
                        </SubmitButton>
                    </Form>)}
                </Formik>
            </div>
            {flagLoading && (
                <div className={styles.Overlay}>
                    <div className={styles.OverlaySpinner}>
                        <Spin size="large" />
                    </div>
                </div>
            )}
        </div>
    </div>
);

}; `

But in this code formik.errors is always {}

`import React, {useEffect, useState} from 'react'; import {Spin, Typography} from "antd"; import styles from "./SettingPage.module.scss" import {Form, FormItem, Input, SubmitButton, ResetButton} from "formik-antd"; import {validateName} from "../authPage/utils"; import {Formik, useFormik} from "formik"; import {FormNameType} from "./SettingPage.types"; import {changeNameThunk} from "../../redux/slices/userSlice"; import {useDispatch, useSelector} from "react-redux"; import {RootState} from "../../redux/store"; import classNames from "classnames/bind";

let cx = classNames.bind(styles); const { Text } = Typography;

export const SettingPage = () => { const { flagChangeName, firstName, lastName} = useSelector((state: RootState) => state.UserReducer); const [formName, setFormName] = useState<FormNameType | null>(null);

const [flagLoading, setFlagLoading] = useState<boolean>(false);

const formik = useFormik({
    initialValues: {
        firstName: firstName,
        lastName: lastName
    },
    onSubmit: (values, { setSubmitting }) => {
        const userData = {
            firstName: values.firstName.trim(),
            lastName: values.lastName.trim(),
        };
        handleSubmitName(userData);
        setSubmitting(false);
    },
});

const dispatch = useDispatch();

useEffect(() => {
    console.log(formik);
}, [])

useEffect(() => {
    console.log(formik);
}, [formik])

useEffect(() => {
    if (formName !== null) {
        dispatch(changeNameThunk(formName))
    }

}, [formName]);

useEffect(() => {
    if (flagChangeName === "ok" || "error") {
        setFlagLoading(false);
        setFlagBut(false)
    }
}, [flagChangeName]);

const handleSubmitName = (formData: FormNameType): void => {
    if (formData !== null) {
        if (formData.firstName !== firstName || formData.lastName !== lastName) {
            setFlagLoading(true);
            setFormName(formData);
        } 
    } else {
        setFlagLoading(true);
        setFormName(formData);
    }
};

return (
    <div className={styles.SettingPageContainer}>
        <div>
            <div>
                <Formik
                    initialValues ={{
                        firstName: firstName,
                        lastName: lastName
                    }}
                    onSubmit={(values, { setSubmitting }) => {
                        const userData = {
                            firstName: values.firstName.trim(),
                            lastName: values.lastName.trim(),
                        };
                        handleSubmitName(userData);
                        setSubmitting(false);
                    }}
                >
                    <Form>
                        <FormItem validate={validateName} name="firstName">
                            <Input
                                className={cx({
                                    TextField: true,
                                    TexfieldFilledNonError: formik.values.firstName.length !== 0 && !formik.errors.firstName,
                                    TextFieldError: formik.errors.firstName && formik.touched.firstName
                                })}
                                name="firstName"
                                placeholder="Ваше Имя"
                                onFocus={handleInputFocus}
                            />
                        </FormItem>
                        <div
                            className={cx({
                                ValidatorsWrap: true,
                                ValidatorsWrapPlain: formik.errors.firstName && formik.touched.firstName,
                                ValidatorsWrapNone: !(formik.errors.firstName && formik.touched.firstName)
                            })}>
                            {formik.errors.firstName && formik.touched.firstName && (
                                <Text
                                    className={styles.DangerText}>
                                    {formik.errors.firstName}
                                </Text>
                            )}
                        </div>
                        <FormItem validate={validateName} name="lastName">
                            <Input
                                className={cx({
                                    TextField: true,
                                    TexfieldFilledNonError: formik.values.lastName.length !== 0 && !formik.errors.lastName,
                                    TextFieldError: formik.errors.lastName && formik.touched.lastName
                                })}
                                name="lastName"
                                placeholder="Ваша Фамилия"
                                onFocus={handleInputFocus}
                            />
                        </FormItem>
                        <div
                            className={cx({
                                ValidatorsWrap: true,
                                ValidatorsWrapPlain: formik.errors.lastName && formik.touched.lastName,
                                ValidatorsWrapNone: !(formik.errors.lastName && formik.touched.lastName)
                            })}>
                            {formik.errors.lastName && formik.touched.lastName && (
                                <Text
                                    className={styles.DangerText}>
                                    {formik.errors.lastName}
                                </Text>
                            )}
                        </div>
                        <SubmitButton
                            type="primary"
                            htmlType="submit"
                            className={styles.btn}
                            onClick={formik.submitForm}
                            disabled={flagLoading}>
                            <Text className={styles.btnText}>Сохранить</Text>
                        </SubmitButton>
                    </Form>
                </Formik>
            </div>
            {flagLoading && (
                <div className={styles.Overlay}>
                    <div className={styles.OverlaySpinner}>
                        <Spin size="large" />
                    </div>
                </div>
            )}
        </div>
    </div>
);

}; `

Thanks in advance for your help, formik is good library