React Formik Field strange behavior with autofocus - reactjs

Question

I have a simple Formik Form and one from my field is custom field named MySpecialField which i try to implement but there is issue with autofocus behavior. I can only type by one character in my MySpecialField and then autofocus is gone.
I'm new with Formik and can not understand why it happens and how it could be solved?
const formik = useFormik<UserGroupInterface>({
initialValues: {
firstName: "",
groupName: "",
},
validate: (data: UserGroupInterface) => {
let errors: Record<string, string> = {};
if (!data.groupName) {
errors.groupName = "* required";
}
if (!data.firstName) {
errors.firstName = "* required";
}
return errors;
},
onSubmit: (data): void => {
console.log("submit", data);
},
});
const formikTouched: any = formik.touched;
const formikErrors: any = formik.errors;
const isFormFieldValid = (name: any) =>
!!(formikTouched[name] && formikErrors[name]);
const getFormErrorMessage = (name: any) => {
return (
isFormFieldValid(name) && (
<small className="p-error">{formikErrors[name]}</small>
)
);
};
//#ts-ignore
const MySpecialField = ({ field, props }) => {
return <InputText {...field} {...props} />;
};
<FormikProvider value={formik}>
<form
onSubmit={formik.handleSubmit}
className="p-fluid grid formgrid my-5"
>
<div className="field col-12 md:col-4">
<span className="p-float-label">
<Field
name="firstName"
id="firstName"
component={MySpecialField}
className={classNames({
"p-invalid": isFormFieldValid("firstName"),
})}
autoFocus // This is do not work as expected, only by one character
value={formik.values.firstName}
onChange={formik.handleChange}
/>
<label
htmlFor="firstName"
className={classNames({
"p-error": isFormFieldValid("firstName"),
})}
>
Group 1
</label>
</span>
{getFormErrorMessage("firstName")}
</div>
<div>
<span className="p-float-label">
<InputText
id="groupName"
name="groupName"
value={formik.values.groupName}
onChange={formik.handleChange}
autoFocus
className={classNames({
"p-invalid": isFormFieldValid("groupName"),
})}
/>
<label
htmlFor="name"
className={classNames({
"p-error": isFormFieldValid("groupName"),
})}
>
Group 2
</label>
</span>
{getFormErrorMessage("groupName")}
</div>