Целые формы перерисовываются при каждом нажатии клавиши

Question

У меня сложная форма настройки для регистрации пользователей, проблема в том, что вся форма перерисовывается при каждом нажатии клавиши

Структура приложения

Я дал архитектуру своего приложенияниже сверху вниз

UserRegistration
Родительский компонент, который содержит единственный источник истины, имеет состояние в виде объекта, он передаетвводит значения как реквизиты для его дочернего элемента

user:{
  number: '1234',
  firstName: 'Vaibhav',
  lastName: 'Shelke'
}

, а его дочерний элемент равен

<UserDetails
              getUserDetails={(userDetails, errors) => {
                this.setState({
                  userDetails,
                  errors: errors || {},
                  isSubmitable:
                    countLeaves(errors) === 0 && countLeaves(userDetails) > 0
                });
              }}
              values={this.state.userDetails}
              errors={this.state.errors}
            />

UserDetails
Повторно используемый компонент, который содержитбазовые значения, такие как firstName, lastName, number.этот компонент получает входные значения, а также функцию, которая отражает изменения в родительском компоненте, от его родителя, т.е. UserRegistraion

handleInput = (e, name) => {
    const { values, getUserDetails } = this.props;
    const userDetails = { ...values };
    if (e instanceof Date) {
      userDetails[name] = format('yyyy-MM-dd', e); // Date Input
    } else if (e) {
      userDetails[e.target.name] = e.target.value; // Text Input
    }
    getUserDetails(userDetails, validateUser(userDetails));
  };

TextInput
Основной вводкомпонент, который фактически изменяет его, получает свое значение и обработчик от своего родителя, т.е.UserDetails as props

const {
      label,
      name,
      onInputChange,
      icon,
      intent,
      helperText,
      labelInfo,
      value,
      type
    } = this.props;

    return (
      <FormGroup
        helperText={helperText}
        label={label}
        labelFor="text-input"
        labelInfo={labelInfo || ''}
      >
        <InputGroup
          type={type}
          intent={intent}
          leftIcon={icon}
          id={name}
          name={name}
          placeholder={label}
          onChange={e => onInputChange(e)}
          value={value || ''}
        />
      </FormGroup>
    );

Все перечисленные выше компоненты основаны на классах

Я пробовал использовать shouldComponentUpdate() но это все равно не работает

Я дал код в кратком изложении проблемы