Why doesn't the 'onChange' event work on a field that is filled automatically based on the values of other fields?

Question

I have created a form using antd ProForm. In this form, a datePicker field is automatically filled based on the values entered in other fields. When the submit button is clicked, the values of all the fields, except for the one that was filled automatically, are logged in the console. How can I retrieve the value of the automatically-filled field (nextDueDate)? Here is my code:

export default () => {
  const [form] = Form.useForm();
  /* Calculating Next Due Date */
  const [intervalDays, setIntervalDays] = useState();
  const [typeOfDate, setTypeOfDate] = useState();
  const [intervalUnit, setIntervalUnit] = useState(" ");
  const [lastDueDate, setLastDueDate] = useState();
  const [nextDueDate, setNextDueDate] = useState();
  const calculateDueDate = () => {
    const interval = intervalDays;
    const dueDate = new Date(lastDueDate);
    const unit = typeOfDate;
    if (unit === "1") {
      dueDate.setDate(dueDate.getDate() + interval);
    } else if (unit === "2") {
      dueDate.setMonth(dueDate.getMonth() + interval);
    }
    const year = dueDate.getFullYear();
    const month = String(dueDate.getMonth() + 1).padStart(2, "0");
    const day = String(dueDate.getDate()).padStart(2, "0");
    const nextDate = `${year}-${month}-${day}`;
    setNextDueDate(nextDate);
  };

  useEffect(() => {
    if (intervalDays && lastDueDate && typeOfDate) {
      calculateDueDate();
    }
  }, [intervalDays, typeOfDate, lastDueDate]);

  return (
    <ConfigProvider locale={enUS}>
      <ProForm
        onFinish={async (values) => {
          await waitTime(2000);
          console.log(values);
          message.success("Success");
        }}
      >
        <ProFormList name="datas" alwaysShowItemLabel>
          {() => {
            return (
              <ProCard>
                <ProForm.Group>
                  <ProFormDigit
                    onChange={(value) => setIntervalDays(value)}
                    name="interval"
                    label="Interval"
                  />
                  <ProFormSelect
                    onChange={(value, secondparam) => {
                      setTypeOfDate(value);
                      setIntervalUnit(secondparam);
                    }}
                    name="typeOfDate"
                    options={[
                      {
                        value: "1",
                        label: "Day(s)",
                      },
                      {
                        value: "2",
                        label: "Month(s)",
                      },
                    ]}
                  />
                </ProForm.Group>
                <ProForm.Group>
                  <ProFormDatePicker
                    onChange={(value) => setLastDueDate(value)}
                    name="lastDueDate"
                    label="Last Due Date"
                  />
                  <ProFormDatePicker
                    name="nextDueDate"
                    onChange={(value) => setNextDueDate(value)}
                    value={nextDueDate}
                    label="Next Due Date"
                  />
                </ProForm.Group>
              </ProCard>
            );
          }}
        </ProFormList>
      </ProForm>
    </ConfigProvider>
  );
};

The value of nextDueDateis not logged in the console.

There is also a link to my code in CodeSandbox.