Показать ошибки из API в окне Formix

Question

Я пытаюсь показать сообщение об ошибке из rest api, когда пользователь пытается отредактировать профиль и ввел неправильный текущий пароль или ввел адрес электронной почты, который используется в данный момент. Я использую formik для проверки правильности ввода, поэтому я не знаю, как показать ошибку при вводе или как показать простое предупреждение при загрузке.

 private editFormInputSettings: InputSettings[] = [
    {
          field_name: 'password',
          label_value: 'Old password',
          placeholder: '********',
          type: 'password'
        },
        {
          field_name: 'newPassword',
          label_value: 'New password',
          placeholder: '********',
          type: 'password'
        },
    ...
    }

Схема проверки:

export const editProfileSchema = Yup.object().shape({
      newPassword: Yup.string()
        .max(18, 'Password is to long')
        .min(5, 'Password is to short'),
      confirmPassword: Yup.string()
        .oneOf([Yup.ref('newPassword')], 'Passwords not match!')
        .max(18, 'Password is to long')
        .min(5, 'Password is to short')
    });

метод рендеринга:

 public render() {
    console.debug(this.state.errorMesage)
    return (
          <div className='Profile__content'>
            {
                    <Dialog
                    validationSchema={editProfileSchema}
                    handleSubmit={this.handleSubmit}
                    inputs={this.editFormInputSettings}
                    button_text='Update'
                    header='Edit your profile'
                    inline_styles={this.editFormDialogStyles}
                    childComponents={
                      <div className="Errors-messages">
                        {
                          this.state.errorMesage.publicError !== ''
                            ? <div className="alert alert-warning alert-dismissible fade show"
                              role="alert">
                              <strong>{this.state.errorMesage.publicError}</strong>
                              <button type="button" className="close" data-dismiss="alert" aria-label="Close">

                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>

                            : null}
                      </div>
                    }
                  />
                  )
                )
            }
          </div>
        </div>

    );
  }              

Состояние:

this.state = {
      errorMesage: {
        publicError: '',
      },
//another fields..

Метод onSubmit:

public handleSubmit(data: UserDto): Promise<any> { 
    return changeUserData({ ...data })
      .catch((err) => {
        this.setState({ errorMesage: { ...err.response.data } });
      });

  }

метод axios в другом файле (сервисе):

export const changeUserData = async (data: any): Promise<any> => {
  return await axios
    .put(
      `${serverUrl}/profile/edit-profile`,
      { ...data },
      {
        headers: {
          'Authorization': `Bearer ${cookies.get('tk879n')}`,
          'Content-Type': 'application/json'
        }
      }
    )
    .then((res) => {
      setCookie(res);
      return { ...res };

    })
    .catch((err) => {
      return { ...err.response.data };
    });
};

У меня есть json error response вроде этого: {"publicError":"Current password is wrong!","innerError":"io.InvalidPasswordErrorMessage"}

errorMessage в состоянии epmty: console.debug: https://cdn1.imggmi.com/uploads/2019/4/8/de0ca27480e84fc51bd67775cd0f6f72-full.png Возможно, неправильно установлено состояние ошибки ответа