Как вывести ошибки сервера с помощью Formik?

Question

[Alexander]

Здравствуйте, помогите решить задачу, как я могу вывести ошибки сервера, например неверный логин, пароль на стороне ui с помощью библиотеки Formik. Раньше использовал Redux-Form и с этим не было проблем, а вот после перехода на Formik, начали возникать трудности

Пример с Redux-Form, erros приходили от HOC reduxForm в пропсы

import React from 'react'
import { InjectedFormProps, reduxForm } from 'redux-form'
import { required, email } from '../../../utils/validators/validators'
import { createField, Input, Checkbox } from './../../common/FormsControls/FormsControls'
import styles from './../../common/FormsControls/FormsControls.module.css'

type LoginFormOwnProps = {
  captchaUrl: string | null
}

export type LoginFormValuesType = {
  captcha: string
  rememberMe: boolean
  password: string
  email: string
}

type LoginFormValuesTypeKeys = Extract<keyof LoginFormValuesType, string>

const LoginForm: React.FC<InjectedFormProps<LoginFormValuesType, LoginFormOwnProps> & LoginFormOwnProps> = ({
  handleSubmit,
  error,
  captchaUrl,
}) => {
  return (
    <form className={styles.formSubmit} onSubmit={handleSubmit}>
      {createField<LoginFormValuesTypeKeys>(Input, 'email', 'Email', 'email', [required, email])}
      {createField<LoginFormValuesTypeKeys>(Input, 'password', 'Password', 'password', [required])}
      <div className={styles.rememberMe}>
        {createField(Checkbox, 'checkbox', undefined, 'rememberMe', null, { id: 'rememberMe' })}
        <label htmlFor='rememberMe'>remember me</label>
      </div>
      {captchaUrl && (
        <div className={styles.captcha}>
          <img src={captchaUrl} alt='' />
          {createField(Input, 'text', 'Symbols from image', 'captcha', [required], {
            autoFocus: true,
          })}
        </div>
      )}
      {error && <div className={styles.formSummaryError}>{error}</div>}
      <div>
        <button className={styles.btn}>Login</button>
      </div>
    </form>
  )
}

export default reduxForm<LoginFormValuesType, LoginFormOwnProps>({ form: 'login' })(LoginForm)

А вот как выглядит Formik

import React from 'react'
import styles from './../../common/FormsControls/FormsControls.module.css'
import { FormikProps, withFormik } from 'formik'
import * as Yup from 'yup'
import FormsControl from '../../common/FormsControls/FormsControls'

interface OtherProps {
  captchaUrl: string | null
}
export interface LoginFormValues {
  captcha: string
  rememberMe: boolean
  password: string
  email: string
}

const Form = (props: OtherProps & FormikProps<LoginFormValues>) => {
  const { values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, captchaUrl } = props

  return (
    <form className={styles.formSubmit} onSubmit={handleSubmit}>
      <FormsControl control='input' type='email' name='email' />
      <FormsControl control='input' type='password' name='password' />

      <div className={styles.rememberMe}>
        {/* <FormsControl control='checkbox' label='Remember Me' name='rememberMe' /> */}
      </div>

      {captchaUrl && (
        <div className={styles.captcha}>
          <img src={captchaUrl} alt='captcha' />
          <FormsControl control='input' type='text' name='captcha' />

          {/* {createField(Input, 'text', 'Symbols from image', 'captcha', [required], {
            autoFocus: true,
          })} */}
        </div>
      )}

      {/* {errors && <div className={styles.formSummaryError}>{errors}</div>} */}
      {Object.values(errors).map((msg) => (
        <>
          {msg}
          <br />
        </>
      ))}

      <div>
        <button className={styles.btn} type='submit'>
          Login
        </button>
      </div>
    </form>
  )
}

interface MyFormProps {
  onLogin: (values: any) => void
  captchaUrl: string | null
}

const LoginForm = withFormik<MyFormProps, LoginFormValues>({
  mapPropsToValues: () => ({
    email: '',
    password: '',
    rememberMe: true,
    captcha: '',
  }),
  validationSchema: Yup.object().shape({
    email: Yup.string().email('Invalid email format').required('Required'),
    password: Yup.string().required('Required'),
    // rememberMe: Yup.boolean().required('Required'),
    // captcha: Yup.string().required('Required'),
  }),
  handleSubmit(values: LoginFormValues, { props, setSubmitting, setStatus }) {
    setSubmitting(false)
    props.onLogin(values)
    setStatus() //вывод ошибок
  },
})(Form)

export default LoginForm

Знаю только что ошибки выводятся через setStatus, но мне не нужно делать обработку ошибок через разные условия, нужно лишь просто вывести их текст, который уже заготовлен на бэкенде и сидит в объекте