Обновление значения компонента поля response-final-form с помощью вызова функции onSelect?

Я делаю приложение реакции с машинописным текстом и использую response-final-form, я использую некоторые библиотеки реакции для интеграции Google Places и API геокодера: "react-places-autocomplete": "^ 7.2.1" и "react-final-form": "^ 6.3.0"

Проблема, с которой я столкнулся, заключается в обновлении значения в поле response-final-form после того, как пользователь выберет одно из предложений, предоставленных компонентом автозаполнения onSelect: Ниже приведены некоторые выдержки из кода:

Функции onSelect:

const handleCitySelect = (selectedCity: string) => {
    geocodeByAddress(selectedCity)
      .then(results => getLatLng(results[0]))
      .then(latlng => {
        setCityLatLng(latlng);
      }); <-- Here I need to update the field with selectedCity
  };

  const handleVenueSelect = (selectedVenue: string) => {
    geocodeByAddress(selectedVenue)
      .then(results => getLatLng(results[0]))
      .then(latlng => {
        setVenueLatLng(latlng);
      }); <-- Here I need to update the field with selectedVenue
  };

Окончательная форма ответа:

      <FinalForm <-- react-final-form component

        validate={validate}
        initialValues={activity}
        onSubmit={handleFinalFormSubmit}
        render={({ handleSubmit, invalid, pristine }) => (
          <Form onSubmit={handleSubmit} loading={loading}> <-- semantic-ui-react component
            <Field
              name="title"
              placeholder="Title"
              value={activity.title}
              component={TextInput}
            />
            <Field
              name="description"
              placeholder="Description"
              rows={3}
              value={activity.description}
              component={TextAreaInput}
            />
            <Field
              component={SelectInput}
              options={category}
              name="category"
              placeholder="Category"
              value={activity.category}
            />
            <Form.Group widths="equal">
              <Field
                component={DateInput}
                name="date"
                date={true}
                placeholder="Date"
                value={activity.date}
              />
              <Field
                component={DateInput}
                name="time"
                time={true}
                placeholder="Time"
                value={activity.time}
              />
            </Form.Group>

            <Field <-- field I need to update after the onSelect callback
              component={PlaceInput}
              name="city"
              placeholder="City"
              options={{ types: ["(cities)"] }}
              value={activity.city}
              onSelect={handleCitySelect}
            />
            <Field <-- field I need to update after the onSelect callback
              component={PlaceInput}
              name="venue"
              placeholder="Venue"
              options={{
                location: new google.maps.LatLng(cityLatLng),
                radius: 1000,
                types: ["establishment"]
              }}
              value={activity.venue}
              onSelect={handleVenueSelect}
            />
<...>

PlaceInput - это настраиваемый компонент, который служит оболочкой для компонента PlacesAutocomplete, который делает предложения в соответствии с тем, что вводит пользователь.

Спасибо всем, кто может предложить решение. Я рыскал в Интернете и не мог найти быстрого решения проблемы, которая, как мне кажется, должна быть простой задачей. Если требуются дополнительные пояснения, дайте мне знать или еще несколько отрывков кода.

Ваше здоровье,