Где должно находиться состояние сложной регистрационной формы в React.js?

Question

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

vehicle{
  registrationNumber: "MH1234",
  type: "xyz"
  driver:{
    user:{
      firstName: xyz,
      lastName: abc,
      email: xyz,
      phone: 1234,
      city: random
    },
    kyc:{
      method:xyz,
      id: abcd
    },
  },
  owner:{
    user:{
      firstName: xyz,
      lastName: abc,
      email: xyz,
      phone: 1234,
      city: random
    },
    kyc:{
      method:xyz,
      id: abcd
    },
  }
}

как мне управлять своим состоянием такой вложенной формы

Компонент Heirarchy

Heirarchy компонента выглядит примерно так

Регистрация транспортных средств

• Сохраняет все состояние формы в вышеуказанном объекте и передает его детям в качестве реквизита.

у него есть следующие дети

• VehicleDetails - хранит информацию об автомобиле

• OwnerDetails - хранит информацию о владельце

  • UserDetails - хранит пользовательскую часть владельца
  • KycDetails - хранит часть kyc владельца

• DriverDetails - хранит информацию о водителе

  • UserDetails - хранит пользовательскую часть драйвера
  • KycDetails - хранит часть драйвера kyc

как мне подходить к управлению состоянием такой формы прямо сейчас, я передаю функции onChange как реквизиты родительскому элементу, и родительское состояние изменяется на каждом keyStroke, что также является проблемой для производительности, поскольку вся форма перерисовывается на каждом нажатие клавиши

У меня есть доступ к глобальной библиотеке управления состоянием, такой как кеш-клиент apollo и redux

Я попытался выровнять состояние, но это приводит к модели водопада, где я должен пропустить реквизит все дальше и дальше вниз

Ниже приведен код, чтобы дать вам лучшее понимание потока

<VehicleOwner
  onChange={(owner, error) => {
    const { errors } = this.state;
    errors.owner = error;
    this.setState({
      owner,
      errors,
      isSubmitable:
        countLeaves(err) === 0 &&
        countLeaves(owner) > 0 &&
        countLeaves(driver) > 0 &&
        countLeaves(vehicle) > 0
          ? true
          : false
    });
  }}
  owner={this.state.owner || {}}
  errors={this.state.errors.owner || {}}
/>

inside the owner:

 <UserDetails
  getUserDetails={(user, error) => {
    const { owner, errors, onChange } = { ...this.props };
    owner.user = user;
    errors.user = error;
    onChange(owner, errors);
  }}
  values={this.props.owner.user || {}}
  errors={this.props.errors.user || {}}
/>

<KycDetails
  onChange={(kyc, error) => {
    const { owner, errors } = this.props;
    owner.kyc = kyc;
    errors.kyc = error;
    this.props.onChange(owner, errors);
  }}
  values={this.props.owner.kyc || {}}
  errors={this.props.errors.kyc || {}}
/>

 <LicenceDetails
  onChange={(licence, error) => {
    const { owner, errors } = this.props;
    owner.licence = licence;
    errors.licence = error;
    this.props.onChange(owner, errors);
  }}
  values={this.props.owner.licence || {}}
  errors={this.props.errors.licence || {}}
/>


and finally inside one of these components is individual textinputs which are a wrapper around html input

 <TextInput
  name="idNumber"
  label="licence Number"
  labelInfo="*"
  helperText={errors.idNumber || ''}
  intent={errors.idNumber && 'danger'}
  onInputChange={this.handleInput}
  value={values.idNumber}
/>

Any help will be greatly appreciated