Рендеринг контейнеров, которые имеют сборщики времени (контейнер имеет два сборщика времени)

Question

Я пытаюсь визуализировать строки средств выбора времени (каждая строка имеет два средства выбора времени - по столбцам) - я отслеживаю эти строки в переменной состояния (как массив - sessionTimingsList), когда я использовал переменную состояния для сопоставления я не могу отобразить пользовательский интерфейс (для этого раздела ничего не отображается). Я не уверен, почему я не могу рендерить ряды выбора времени на основе состояния. Без итерации переменной состояния отображается пользовательский интерфейс. (Я использую пользовательский интерфейс для выбора времени), пожалуйста, найдите код ниже. Цени любую помощь, чтобы решить эту проблему.

const ExperienceSessionTimings = forwardRef((props, ref) => {
  const [sessionTimingList, setSessionTimingList] = useState([
    {
      startTime: new Date(),
      endTime: new Date()
    }
  ]);
  const handleDateChange = (date, index, type) => {
    let updatedSessionTimings = [...sessionTimingList];
    if (type === "start") {
      updatedSessionTimings.forEach((element, idx) => {
        if (idx === index) {
          element.startTime = date;
        }
      });
      setSessionTimingList(updatedSessionTimings);
    } else {
      updatedSessionTimings.forEach((element, idx) => {
        if (idx === index) {
          element.endTime = date;
        }
      });
      setSessionTimingList(updatedSessionTimings);
    }
  };
  console.log("sessionTimingList", sessionTimingList);
  return (
    <Form>
      <SessionsContainer>
        {sessionTimingList.map((session, index) => {
          <>
            <Heading>{`Session ${index + 1}`}</Heading>
            <CoupleContainer style={{ marginTop: "10px" }}>
              <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <InputContainer style={{ width: "306px" }}>
                  <Label>Start Time</Label>
                  <TimePickerField
                    disabled={false}
                    margin="normal"
                    id={`time-picker1`}
                    label="Time picker"
                    value={session.startTime}
                    onChange={date => handleDateChange(date, index, "start")}
                    KeyboardButtonProps={{
                      "aria-label": "change time"
                    }}
                    InputProps={{
                      disableUnderline: true
                    }}
                    InputLabelProps={{ shrink: false }}
                    keyboardIcon={
                      <StyledIconContainer>
                        <img src={Images.ClockIcon} />
                      </StyledIconContainer>
                    }
                  />
                </InputContainer>
              </MuiPickersUtilsProvider>
              <FormDivider style={{ width: "20px" }}></FormDivider>
              <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <InputContainer style={{ width: "306px" }}>
                  <Label>End Time</Label>
                  <TimePickerField
                    disabled={false}
                    margin="normal"
                    id={`time-picker2`}
                    label="Time picker"
                    value={session.endTime}
                    onChange={date => handleDateChange(date, index, "end")}
                    KeyboardButtonProps={{
                      "aria-label": "change time"
                    }}
                    InputProps={{
                      disableUnderline: true
                    }}
                    InputLabelProps={{ shrink: false }}
                    keyboardIcon={
                      <StyledIconContainer>
                        <img src={Images.ClockIcon} />
                      </StyledIconContainer>
                    }
                  />
                </InputContainer>
              </MuiPickersUtilsProvider>
            </CoupleContainer>
            <AddSessionsContainer>
              <AddSessionsText
                onClick={() =>
                  setSessionTimingList([
                    ...sessionTimingList,
                    {
                      startTime: new Date(),
                      endTime: new Date()
                    }
                  ])
                }
              >
                + Add New Session Timings
              </AddSessionsText>
            </AddSessionsContainer>
          </>;
        })}
        <ErrorFocus />
      </SessionsContainer>
    </Form>
  );
});
export default ExperienceSessionTimings;