Почему form.change (имя, значение) не обновляет значение формы

Question

Я использую FormSpy в дочернем файле и имею доступ к this.props.form в текущем файле. Значения формы, которые я хочу получить, в настоящее время находятся в локальном состоянии в дочернем файле, и я пытался обновить значения формы с помощью form.change (), но они не обновляются.

Сокращенный код для выделения проблема попытки обновить значения формы в зависимости от состояния.

class ABC extends Component {
    this.state = {
      segmentMappings: {
        id: '',
        name: '',
        statusId: ''
      }
    };
 handleStatusChange = (e) => {
    var segmentMappings = [...this.state.segmentMappings];
    var newStatusId = 8;
    // Logic to update this.state.segmentMappings
        var name = `segments${e}.statusId`;
        console.log('Field name', name);

//Form values are not updating form value as I was expecting
        this.props.form.change(name, newStatusId);
      this.setState({ segmentMappings }
    }
  }

const SegmentTile = {
  return null;
}

//I want to render the names prop and save id & statusId values to the form.
segmentsData(segmentsByApp) {
    let result = [];
    let i = 0;
      segmentsByApp.map((seg) => {
          result.push(
            <div
              key={seg.id} onClick={() => this.handleStatusChange(seg.id)}>
              <Field
                name={`segments[${seg.id}].id`} value={seg.id}
                component={SegmentTile}></Field>
              <Field
                name={`segments${seg.id}.statusId`} value={seg.statusId}
                component={SegmentTile}></Field>
              <Segment>
                <span>{seg.name}</span>
              </Segment>
            </div >
          );
          result.push(<SegmentDivider key={seg.id + 'divider'} />);
          i++;
        }
      }
      );
      return result;
  };

  render() {
 {this.segmentsData(this.state.segmentMappings)}
}
}