Expected behavior

after calling clearError all errors should disappear

Actual behavior

Input still has class is-invalid so error is shown

Resources (screenshots, code snippets etc.)

function Basic({ t }) {
  const [login, { data, loading, error }] = useMutation(LOGIN_MUTATION);
  const { handleSubmit, register, errors, setError, clearError } = useForm();
  const handleChange = e => {
    e.persist();
    clearError(e.target.name);
    e.target.classList.remove('is-invalid');
  };
  const onSubmit = values => {
    login({
      variables: { username: values.username, password: values.password }
    }).then();
  };
  if (data) {
    switch (data.login.__typename) {
      case 'ResultError':
        setError('username', 'noMatch', 'Login wrong');
        break;
      case 'LoginResultSuccess':
        break;
    }
  }
  return (
    <section>
      <MDBCard narrow className="mb-5">
        <MDBCardImage
          className="view view-cascade gradient-card-header blue-gradient"
          cascade
          tag="div"
        >
          <h2 className="h2-responsive mb-2">{t('headline')}</h2>
        </MDBCardImage>
        <MDBCardBody cascade>
          <form
            className="needs-validation"
            onSubmit={handleSubmit(onSubmit)}
            noValidate
          >
            <MDBRow center>
              <MDBCol md="4">
                <MDBInput
                  // @ts-ignore
                  inputRef={register({ required: t('form:required') })}
                  name="username"
                  icon=""
                  iconClass=""
                  iconRegular
                  type="text"
                  onChange={handleChange}
                  label="Type your username"
                  className={errors.username ? 'is-invalid' : ''}
                >
                  <div
                    className="invalid-feedback"
                    style={{ paddingLeft: '2.5rem' }}
                  >
                    {errors.username && errors.username.message}
                  </div>
                  <div
                    className="valid-feedback"
                    style={{ paddingLeft: '2.5rem' }}
                  >
                    Looks good!
                  </div>
                </MDBInput>
              </MDBCol>
              <MDBCol md="4">
                <MDBInput
                  // @ts-ignore
                  inputRef={register({ required: t('form:required') })}
                  name="password"
                  icon="lock"
                  type="password"
                  label="Type your password"
                  className={errors.password ? 'is-invalid' : ''}
                >
                  <div
                    className="invalid-feedback"
                    style={{ paddingLeft: '2.5rem' }}
                  >
                    {errors.password && errors.password.message}
                  </div>
                  <div
                    className="valid-feedback"
                    style={{ paddingLeft: '2.5rem' }}
                  >
                    Looks good!
                  </div>
                </MDBInput>
              </MDBCol>
              <MDBCol middle md="2">
                <MDBBtn
                  className="text-center"
                  type="submit"
                  disabled={loading}
                >
                  Login
                </MDBBtn>
              </MDBCol>
            </MDBRow>
          </form>
        </MDBCardBody>
      </MDBCard>
    </section>
  );
}

export default withTranslation(['login', 'form'])(Basic);