Блокирование и разблокирование кнопки при отправке формы и получении серверных ошибок

Есть форма регистрации (созданная через Redux Form), которая отправляет данные на сервер. Если все успешно, происходит redirect, если нет - серверная ошибка выводится на экран. При серверной ошибке можно заблокировать кнопку следующим образом: создать локальный state в родителе, прописать в нем errorMessage, поместить ошибку сервера в errorMessage, далее пробросить errorMessage в дочерний компонент и прописать кнопке что-то вроде <button type="submit" disabled={pristine || errorMessage}>Войти</button>.

Не лучший способ, потому что кнопка остается заблокированной.

Вопрос: необходимо грамотное условие для блокирования кнопки при серверной ошибке, а позже для ее разблокирования в том случае, если вы очистили какое-либо из полей?

Родитель:

export class Login extends Component {

  state = {
    clicked: false,
    clickedRepeat: false,
    errorMessage: '',
  }

  handleClick = () => {
    const { clicked } = this.state;
    this.setState({
        clicked: !clicked
    })
  }

  handleClickRepeat = () => {
    const { clickedRepeat } = this.state;
    this.setState({
      clickedRepeat: !clickedRepeat
    })
  }

  submit = (values) => {
    const { mutate } = this.props;
    mutate({
      variables: {
        firstName: values.firstName,
        secondName: values.secondName,
        email: values.email,
        password: values.password,
      }
    })
    .then(res => {
      console.log(res)
    })
    .catch(error => {
      this.setState({
        errorMessage: error.message
      })
    })
  }

  render() {
    const { clicked, clickedRepeat, errorMessage } = this.state;
    return (
      <div className="login">
        <img src={logo} alt="logo"/>
        <LogOn 
          clicked={clicked} 
          clickedRepeat={clickedRepeat}
          errorMessage = {errorMessage}
          handleClick={this.handleClick} 
          handleClickRepeat={this.handleClickRepeat} 
          onSubmit={this.submit}
        />
      </div>
    )
  }
}

export default graphql(LOG_ON)(Login);

Дочерний:

const LogOn = (props) => {
  const { 
    handleSubmit, 
    clicked, 
    clickedRepeat, 
    errorMessage,
    handleClick, 
    handleClickRepeat, 
    renderField, 
    pristine, 
    submitting,
  } = props;
  console.log(props)
  return (
    <form className="log__on" onSubmit={handleSubmit}>
      <p>Регистрация</p>
      <Field
        name="firstName"
        type="text"
        component={renderField}
        placeholder="Имя"
      />
      <Field
        name="secondName"
        type="text"
        component={renderField}
        placeholder="Фамилия"
      />
      <Field
        name="email"
        type="email"
        component={renderField}
        placeholder="Электронная почта"
      />
      <Field
        name="password"
        type={clicked ? "text" : "password"}
        component={renderField}
        placeholder="Введите пароль"
      />
      <Field
        name="repeatPassword"
        type={clickedRepeat ? "text" : "password"}
        component={renderField}
        placeholder="Повторите пароль"
      />
      <img 
        src={clicked ? opened : closed} 
        alt="showpass" 
        onClick={handleClick}
      /> 
      <img 
        src={clickedRepeat ? opened : closed} 
        alt="showpass" 
        onClick={handleClickRepeat}
      /> 
      <button type="submit" disabled={pristine || submitting}>Применить и войти</button>
      <div className="log__on__link">
        <p>Уже зарегистрированы?</p>
        <a href="/">Вход</a>
      </div> 
      {errorMessage && 
        <div className="log__on__mistake">
          <img src={mistake} alt="mistake"/>
          <p>{errorMessage}</p>
        </div>
      }
    </form>  
  )
}

export default reduxForm({
  form: 'log-on',
  validate,
  renderField,
})(LogOn)