我有一个应用程序，用户可以在其中设置每个生成字段的时间。

  const [firstTime, setFirstTime] = useState({});
  const [secondTime, setSecondTime] = useState({});

  const onFinish = values => {
    console.log(
      values.users.map(i => {
        return {
          ...i,
          time0: moment(i.time0).format("HH mm"),
          time1: moment(i.time1).format("HH mm")
        };
      })
    );
  };

  function onChange1(time, timeString, key) {
    console.log(time, timeString);
    setFirstTime({ ...firstTime, [key]: timeString });
  }
  function onChange2(time, timeString, key) {
    console.log(time, timeString);
    setSecondTime({ ...secondTime, [key]: timeString });
  }
  console.log(secondTime, firstTime);
  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Form.Item
                    {...field}
                    name={[field.name, "first"]}
                    fieldKey={[field.fieldKey, "first"]}
                    key={`item7${index}`}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    key={`item8${index}`}
                    name={[field.name, "time0"]}
                    initialValue={moment(
                      firstTime[Object.keys(firstTime)[index - 1]]|| '07:00',
                      "HH mm"
                    ).add(index * 5, "minutes")}
                    fieldKey={[field.fieldKey, "time0"]}
                  >
                    <TimePicker
                      onChange={(date, dateString) =>
                        onChange1(date, dateString, field.key)
                      }

                    />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    key={`item9${index}`}
                    name={[field.name, "time1"]}
                    initialValue={moment(
                      secondTime[Object.keys(secondTime)[index - 1]] || '10:00',
                      "HH mm"
                    ).add(index * 5, "minutes")}
                    fieldKey={[field.fieldKey, "time1"]}
                  >
                    <TimePicker
                      onChange={(date, dateString) =>
                        onChange2(date, dateString, field.key)
                      } 
                    />
                  </Form.Item>

                  <MinusCircleOutlined
                    onClick={() => {
                      remove(field.name);
                    }}
                  />
                </Space>
              ))}

              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

接下来是该应用程序的想法：

1. 用户单击add field按钮，其中显示一些输入，用户可以在其中添加价值
2. 日期选择器的默认值为07:00 and 10:00（但用户可以更改初始值）
3. 用户将生成的每个日期选择器的下一个值必须比用户的每个选定值高5分钟（来自具有时间选择器的上一行）
   Ex1：
   07 : 00 10:00
   07:05 10:05

示例2：
用户可以通过以下方式更改第一个值： 07 :25
10:05
07:30 10:10
用户可以选择下一个值，例如：07:40 10:15
07:45 10:20
…上..

现在，仅当我单击“添加字段”按钮而不更改日期选择器中的值时，该想法才起作用，并且下一个值将与我描述的一样，但是当我尝试从选择器中更改值时出现问题，因为下一个选择器不要考虑5分钟后该值会更高。
问题：如何解决问题并使上述想法可行？
演示：

https://codesandbox.io/s/hungry-star-
nu5ld?file=/index.js:365-3725