خطای عدم تطابق نوع در ارورهای فرمیک با استفاده از تایپاسکریپت

من یک کامپوننت سفارشی برای ورودیها برای formik دارم و در داخل آن برچسب خطا را در صورت وجود نمایش میدهم.
اگر آن را به این صورت چاپ کنم: {errors[field.name]} کار میکند
اما {t(errors[field.name]?.toLocaleString())} این کار نمیکند.

import { FieldProps, FormikErrors } from "formik";
import { useTranslation } from "react-i18next";

const InputField: React.FC<InputFieldProps & FieldProps> = ({
  field,
  form: { touched, errors },
  type,
  label,
  ...props
}) => {
  const { t } = useTranslation();
  
  return (
    <div>
      <label
        htmlFor={field.name}>
        {label}
      </label>
      <input
        type={type}
        {...field}
        {...props}/>
      {touched[field.name] && errors[field.name] && (
        <div>
          <p>
            {errors[field.name]}
            {t(errors[field.name])} <---- this does not work
          </p>
        </div>
      )}
    </div>
  );
};

export default InputField;

من خطا دریافت میکنم:

Argument of type 'string | FormikErrors<any> | string[] | FormikErrors<any>[] | undefined' is not assignable to parameter of type 'TemplateStringsArray | Normalize<{test: 'test'}> | (TemplateStringsArray | Normalize<...>)[]'.

پاسخ شماره ۱

این روشی است که من مسئله را حل کردم. من همین خطا را در فرمیک با کتابخانه MUI دریافت میکردم:

 {errors?.fieldName && typeof errors.fieldName=== "string" && (
                    <Typography component={'div'} fontSize={12} color={'red'}>
                      {errors.fieldName}
                    </Typography>)}

پاسخ شماره ۲

با این مشکل در useFormik() مواجه شدم و توانستم خطا را به این صورت بهطور ایمن تبدیل کنم

{formik.errors.fieldName ? <div>{formik.errors.fieldName as string}</div> : null}