Следующее значение от объекта должно быть выше предыдущего.

Question

Мое приложение позволяет пользователям добавлять столько полей, сколько они хотят, и сохраняет данные после отправки.

      const [firstTime, setFirstTime] = useState({});
      const [secondTime, setSecondTime] = useState({});
      const [value1, setValue1] = useState(null);
      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")
            };
          })
        );
      };
      console.log("v", value1);

      function onChange1(time, timeString, key) {
        console.log(time, timeString);
        setFirstTime({ ...firstTime, [key]: timeString });
        setValue1(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) => (
                      console.log(secondTime[Object.keys(secondTime)[index - 1]]),
                      (
                        <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)
                              }
                              value={value1}
                            />
                          </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={() => {
                        console.log("v", value1);
                        add();
                      }}
                      block
                    >
                      <PlusOutlined /> Add field
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      );
    };

Идея приложения следующая:

Пользователь нажимает кнопку добавления поля, где появляются некоторые поля ввода, где пользователь может добавить значение Th значения по умолчанию для средств выбора даты это 07:00 и 10:00 (но пользователь может изменить начальные значения). Следующее значение каждого средства выбора даты, которое будет сгенерировано пользователем, должно быть на 5 минут больше, чем каждое выбранное значение пользователя (из предыдущей строки с выбор времени)
Ex1:
07:00 10: 00
07:05 10: 05

Ex2:
Пользователь может изменить первое значение следующим образом:
07:25 10: 05
07:30 10: 10
Пользователь может выбрать следующие значения, например:
07:40 10: 15
07:45 10: 20
.. . и так далее ..

Теперь идея работает только в том случае, если я нажимаю кнопку add field без изменения значения из средства выбора даты, и следующие значения будут такими же, как я описал, но возникает проблема, когда я пытаюсь изменить значение из сборщика, потому что следующие сборщики не принимают во внимание, что значение должно быть выше на 5 минут tes.
Вопрос : Как решить проблему и реализовать описанную выше идею?
demo: https://codesandbox.io/s/hungry-star-nu5ld?file= / index. js: 365-4524