How to change the value of one input field based on what is entered in another in REACT FINAL FORM?

Here is the Final Form Code,

I want to display the end date based on the number of nights and the start date entered. I have highlighted it in the code as well.

Currently, I have to press enter after adding the number of nights to see the update in trip end date, and on changing the start dates I get no change.

Parent component Code:

 let tripEndDate = new Date(
    startDateInMilliseconds ? moment(new Date(startDateInMilliseconds)) : null
  );
  let nights = tripDetails ? tripDetails.nights : null;
  tripEndDate.setDate(tripEndDate.getDate() + parseInt(nights));
  tripEndDate = moment(new Date(tripEndDate).toISOString().split('T')[0]).format('YYYY-MM-DD');
  return (
    <div className={classes}>
      <h1 className={css.title}>{panelTitle}</h1>
      <EditDescriptionForm
        className={css.form}
        initialValues={{
          title,
          description,
          startDate: startDateInMilliseconds
            ? moment(new Date(startDateInMilliseconds).toISOString().split('T')[0]).format(
                'YYYY-MM-DD'
              )
            : null,
          nights: tripDetails ? tripDetails.nights : null,
          tripEndDate: tripEndDate,
        }}
        onSubmit={values => {
          const {
            startDate,
            nights,
          } = values;
            onSubmit({
              publicData: {
                tripDetails: {
                  nights,
                },
                //start date in milliseconds is placed outside tripDetails so that it can be used in query
                startDateInMilliseconds: new Date(startDate).getTime(),
              },
            });
          }
        }}
        onChange={onChange}
        />
    </div>
  );
};

Form Component:

import React from 'react';
import { Form as FinalForm } from 'react-final-form';

const EditDescriptionFormComponent = props => {
  return (
    <FinalForm
      {...props}
      mutators={{ ...arrayMutators }}
      render={formRenderProps => {
        const {
          className,
          disabled,
          ready,
          handleSubmit,
          invalid,
          pristine,
          updated,
          updateInProgress,
          fetchErrors,
          filterConfig,
        } = formRenderProps;

        const classes = classNames(css.root, className);
        const submitReady = (updated && pristine) || ready;
        const submitInProgress = updateInProgress;
        const submitDisabled = invalid || disabled || submitInProgress;

        return (
          <Form className={classes} id={css.formSection} onSubmit={handleSubmit}>
                <FieldTextInput
                  id="startDate"
                  name="startDate"
                  type="date"
                  min={new Date().toISOString().split('T')[0]}
                />
                <FieldTextInput
                  id="nights"
                  name="nights"
                  type="number"
                  min="0"
                />

                 <FieldTextInput
                  id="tripEndDate"
                  name="tripEndDate"
                  className={css.field}
                  type="date"
                  label="Trip End Date"
                  disabled
                />                            {/*I want to show the end date calculated from the start date and the number of nights here*/}

            <Button
              type="submit"
              inProgress={submitInProgress}
              disabled={submitDisabled}
              ready={submitReady}
            >
              SAVE
            </Button>
          </Form>
        );
      }}
    />
  );
};


export default compose(EditDescriptionFormComponent);