Cann't enable Button component

import React from 'react';
import PropTypes from 'prop-types';

const Button = ({ options }) => {
  const { className, labelClass, type, label, onClick, isDisabled } = options;
  return (
    <button
      type={type}
      className={className}
      onClick={onClick}
      disabled={isDisabled}
    >
      <span className={labelClass}>{label}</span>
    </button>
  );
};

Button.propTypes = {
  options: PropTypes.shape({
    className: PropTypes.string,
    labelClass: PropTypes.string,
    type: PropTypes.string,
    onClick: PropTypes.func,
    isDisabled: PropTypes.bool,
  }),
};

export default Button;

import React, { Component } from 'react';
import axios from 'axios';
import Button from '../components/Button';

const getPositions = async () => {
  const response = await axios.get(
    'https://frontend-test-assignment-api.abz.agency/api/v1/positions'
  );
  return response.data.positions;
};

const getToken = async () => {
  const response = await axios.get(
    'https://frontend-test-assignment-api.abz.agency/api/v1/token'
  );
  return response.data.token;
};

class SignUpPage extends Component {
  state = {
    name: '',
    email: '',
    phone: '',
    position: '',
    photo: null,
    formErrors: { name: '', email: '', phone: '' },
    nameValid: false,
    emailValid: false,
    phoneValid: false,
    isFormValid: false,
    positions: [],
    token: '',
  };

  async componentDidMount() {
    const result = await getPositions();
    const token = await getToken();

    this.setState({
      positions: [...result.sort((a, b) => (a.name > b.name ? 1 : -1))],
      token: token,
    });
  }

  validateForm() {
    this.setState({
      isFormValid:
        Boolean(this.state.nameValid) &&
        Boolean(this.state.emailValid) &&
        Boolean(this.state.phoneValid),
    });
  }

  validateField = (fieldName, value) => {
    let fieldValidationErrors = this.state.formErrors;
    let nameValid = this.state.nameValid;
    let emailValid = this.state.emailValid;
    let phoneValid = this.state.phoneValid;
    switch (fieldName) {
      case 'name':
        nameValid = value.length > 1 && value.length < 61;
        fieldValidationErrors.name = nameValid
          ? ''
          : 'Username should contain 2-60 characters';
        break;
      case 'email':
        emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
        fieldValidationErrors.email = emailValid
          ? ''
          : 'User email, must be a valid email according to RFC2822';
        break;
      case 'phone':
        phoneValid =
          value.length === 13 && value.match(/^[+]{0,1}380([0-9]{9})$/i);
        fieldValidationErrors.phone = phoneValid
          ? ''
          : 'Number should start with code of Ukraine +380 and contain 12 digits only';
        break;
      default:
        break;
    }
    this.setState(
      {
        formErrors: fieldValidationErrors,
        nameValid: nameValid,
        emailValid: emailValid,
        phoneValid: phoneValid,
      },
      this.validateForm
    );
  };

  inputChangeHandler = event => {
    const name = event.currentTarget.name;
    const value = event.currentTarget.value;
    this.setState({ [name]: value }, () => {
      this.validateField(name, value);
    });
  };

  render() {
    const { title } = this.props;
    const { positions, isFormValid } = this.state;

    return (
      <div className="formContainer">
        <h1 className="title">{title}</h1>

        <form name="signUpForm" autoComplete="off" method="post">
          <ul className="inputsGroup">
            <li className="inputItem">
              <input
                autoComplete="off"
                className="formInput"
                id="userName"
                name="name"
                onChange={this.inputChangeHandler}
                placeholder="  "
                required
                type="text"
                value={this.state.name}
              />
              <label htmlFor="userName" className="formInputLabel">
                your name
              </label>
            </li>
            <li className="inputItem">
              <input
                autoComplete="off"
                className="formInput"
                id="userEmail"
                name="email"
                onChange={this.inputChangeHandler}
                placeholder="  "
                required
                type="email"
                value={this.state.email}
              />
              <label htmlFor="userEmail" className="formInputLabel">
                email
              </label>
            </li>
            <li className="inputItem">
              <input
                autoComplete="off"
                className="formInput"
                id="userPhone"
                name="phone"
                onChange={this.inputChangeHandler}
                placeholder="  "
                required
                type="tel"
                value={this.state.phone}
              />
              <label htmlFor="userPhone" className="formInputLabel">
                phone
              </label>
              <p>+380 &#40;XX&#41; XXX - XX - XX</p>
            </li>
          </ul>
          <div>
            <p>Select your position</p>
            <ul>
              {positions.map(item => (
                <li key={item.id}>
                  <label htmlFor={item.id}>{item.name}</label>
                  <input
                    type="radio"
                    name="position_id"
                    value={item.name.toLowerCase()}
                    id={item.id}
                    required
                  />
                </li>
              ))}
            </ul>
          </div>
          <label htmlFor="userPhoto">upload your photo</label>
          <input type="file" id="userPhoto" name="photo" required />
          {/* <button type='submit' disabled={!isFormValid}>Sign up</button> */}
          <Button
            options={{
              type: 'submit',
              label: 'sign up',
              isDiabled: !isFormValid,
            }}
          />
        </form>
      </div>
    );
  }
}

export default SignUpPage;