From and to time with interval , need to render the array of time-slots but it is not getting rendered in react js

(1) From time from array of select. (2) To time from array of select. (3) select interval with 30 min or 1 hr..

Depending on that need to generate array of time-slots with from-time :to-time with the interval we have selected, but the array of time-slots are not getting rendered..

result should be like this:-

from : 8:00 am to 8:30 am from : 8:30 am to 9:00 am So any help will be highly appreciated.

<pre>import React, { Fragment, useState, useEffect } from "react";
import { HalfHourlyTimeSlotsList } from "../../../../utils/HalfHourlyTimeSlotsList";
import { HourlyTimeSlotsList } from "../../../../utils/HourlyTimeSlotsList";
import { TimeInterval } from "../../../../utils/timeInterval";
import { TimeSlotsList15Minutes } from "../../../../utils/TimeSlotsList15Minutes";
import {
  Formik,
  FieldArray,
  Form as Formformik,
  Field,
  ErrorMessage,
} from "formik";
import { Form, Col, Row, FormGroup, Button, Table } from "react-bootstrap";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import { TextField, MenuItem, select } from "@material-ui/core";
import classes from "../../../../../css/TimeSlots.module.css";
import { Spinners } from "../../../../components/UI/Spinners";
import { shallowEqual, useSelector } from "react-redux";
import moment from "moment";

const TimeSlotsEditForm = (props) => {
  const [isloading, setIsLoading] = useState(false);
  const [vehicle_type, setVehicleType] = useState("");
  const [endTime, setEndtime] = useState("");
  const [startTime, setStartTime] = useState("");
  const [showTimeSlots, setshowTimeSlots] = useState(false);
  const [array_time, SetArrayTime] = useState([]);
  // const [intervals, SetInervals] =useState([]);

  const { timeslotForEdit } = props;

  const onReportSubmit = async (e) => {
    if (e) e.preventDefault();
    setshowTimeSlots(false);
    setshowTimeSlots(true);
    console.log();
  };

  let value = {
    interval: vehicle_type,
    startTime: startTime,
    endTime: endTime,
  };

  console.log("1", value.startTime);
  console.log("2", value.endTime);
  console.log("3", moment(vehicle_type, "H:mm").format("H:m:ss"));
  

  const doArrayChunks = () => {
   
    var inputDataFormat = "HH:mm a";
    var outputFormat = "HH:mm a";
    var tmp = moment(vehicle_type, inputDataFormat);
    var dif = tmp - moment().startOf("day");

    var startIntervalTime = moment(startTime, inputDataFormat).add(-dif, "ms");
    var endIntervalTime = moment(startTime, inputDataFormat);
    var finishTime = moment(endTime, inputDataFormat);
    
    var intervals = [];
    while (startIntervalTime < finishTime) {
      endIntervalTime.format(outputFormat);
     
      let obj = {
        from: startIntervalTime.format(outputFormat),
        to: endIntervalTime.format(outputFormat),
      };
      intervals.push(obj);
      startIntervalTime.add(dif, "ms");
      endIntervalTime.add(dif, "ms");
      
    SetArrayTime((prev_array_time) => {
      let newArray = [...prev_array_time];
      newArray.push(intervals);
      return newArray;
    });
  };

  

  const renderTbody = (arr) => {
    arr.map((di, vi) => {
      <div key={vi}>{di.from}</div>;
    });
  };

  return (
    <>
      <Fragment>
        {isloading ? <Spinners /> : ""}
        <Form onSubmit={onReportSubmit}>
          <Row className="mb-6">
            <Col className="col-8 col-sm-6 col-md-4 col-lg-4">
              <Form.Group as={Col} style={{ padding: "0px" }}>
                <TextField
                  select
                  label="Start-time*"
                  name="Start-time"
                  value={startTime ? startTime : ""}
                  defaultValue=""
                  onChange={(event) => {
                    setStartTime(event.target.value);
                  }}
                  margin="normal"
                  variant="outlined"
                >
                  <MenuItem value="">
                    None
                  </MenuItem>
                  {HourlyTimeSlotsList &&
                    HourlyTimeSlotsList.map((data, index) => (
                      <MenuItem key={index} value={data.time_name}>
                        {data.time_name}
                      </MenuItem>
                    ))}
                </TextField>
              </Form.Group>
            </Col>
            <Col className="col-8 col-sm-6 col-md-4 col-lg-4">
              <Form.Group as={Col} style={{ padding: "0px" }}>
                <TextField
                  select
                  label="End-time*"
                  name="End-time"
                  value={endTime ? endTime : ""}
                  defaultValue=""
                  onChange={(event) => {
                    setEndtime(event.target.value);
                  }}
                  margin="normal"
                  variant="outlined"
                >
                  <MenuItem value="">
                    None
                  </MenuItem>
                  {HourlyTimeSlotsList &&
                    HourlyTimeSlotsList.map((data, index) => (
                      <MenuItem key={index} value={data.time_name}>
                        {data.time_name}
                      </MenuItem>
                    ))}
                </TextField>
              </Form.Group>
            </Col>
            <Col className="col-8 col-sm-6 col-md-4 col-lg-4">
              <Form.Group as={Col} style={{ padding: "0px" }}>
                <TextField
                  select
                  label="Time interval*"
                  name="Time-slot interval"
                  value={vehicle_type ? vehicle_type : ""}
                  defaultValue=""
                  onChange={(event) => {
                    setVehicleType(event.target.value);
                  }}
                  margin="normal"
                  variant="outlined"
                >
                  <MenuItem value="">
                    None
                  </MenuItem>
                  <MenuItem value={"00:15:00"}>15 minutes</MenuItem>
                  <MenuItem value={"00:30:00"}>30 minutes</MenuItem>
                  <MenuItem value={"01:00:00"}>1 hour</MenuItem>
                </TextField>
              </Form.Group>
            </Col>
          </Row>
          <Button
            variant="primary"
            type="submit"
            onClick={() => doArrayChunks()}
          >
            Generate
          </Button>
        </Form>
      </Fragment>

      <div>{renderTbody(array_time)}</div>

      <Formik
        // initialValues={initialValues}
        onSubmit={async (values) => {
          await new Promise((r) => setTimeout(r, 500));
          alert(JSON.stringify(values, null, 2));
        }}
      >
        {({ values }) => (
          <Formformik>
            <fieldset
              className="form-group p-3 shadow p-3 mb-5 mt-5 bg-white"
              style={{ border: "1px solid #76b3f1" }}
            >
              <legend className="w-auto px-2">
                <h4>Time-slots:</h4>
              </legend>
              {/* <FieldArray name="friends">
                  {({ insert, remove, push }) => (
                    <div>
                      {values.friends.length > 0 &&
                        values.friends.map((friend, index) => (
                          <div className="row" key={index}>
                            <Col className="col-8 col-sm-6 col-md-4 col-lg-4">
                              <Form.Group as={Col} style={{ padding: "0px" }}>
                                <TextField
                                  select
                                  label="From*"
                                  name={`friends.${index}.name`}
                                  value={vehicle_type ? vehicle_type : ""}
                                  defaultValue=""
                                  onChange={(event) => {
                                    setVehicleType(event.target.value);
                                  }}
                                  margin="normal"
                                  variant="outlined"
                                >
                                  <MenuItem value="">
                                    None
                                  </MenuItem>
                                  <MenuItem value={"15 minutes"}>
                                    15 minutes
                                  </MenuItem>
                                  <MenuItem value={"30 minutes"}>
                                    30 minutes
                                  </MenuItem>
                                  <MenuItem value={"1 hour"}>1 hour</MenuItem>
                                </TextField>
                              </Form.Group>
                            </Col>
                            <Col className="col-8 col-sm-6 col-md-4 col-lg-4">
                              <Form.Group as={Col} style={{ padding: "0px" }}>
                                <TextField
                                  select
                                  label="To*"
                                  name={`friends.${index}.email`}
                                  value={endTime ? endTime : ""}
                                  defaultValue=""
                                  onChange={(event) => {
                                    setEndtime(event.target.value);
                                  }}
                                  margin="normal"
                                  variant="outlined"
                                >
                                  <MenuItem value="">
                                    None
                                  </MenuItem>
                                  {HourlyTimeSlotsList &&
                                    HourlyTimeSlotsList.map((data, index) => (
                                      <MenuItem
                                        key={index}
                                        value={data.time_name}
                                      >
                                        {data.time_name}
                                      </MenuItem>
                                    ))}
                                </TextField>
                              </Form.Group>
                            </Col>
                            <Button
                              variant="secondary"
                              type="submit"
                              onClick={() => remove(index)}
                              style={{ margin: "1.1em 0", lineHeight: "1.8em" }}
                            >
                              Remove
                            </Button>
                          </div>
                        ))}
                      <Button
                        variant="primary"
                        type="button"
                        onClick={() => push({ name: "", email: "" })}
                      >
                        Add
                      </Button>
                    </div>
                  )}
                </FieldArray> */}
              {/* {JSON.stringify(array_time, null, 2)}; */}
             
            </fieldset>
          </Formformik>
        )}
      </Formik>
      
      <table className="table table-bordered">
        <thead className="thead text-center">
          <tr>
            <th scope="col">From</th>
            <th scope="col">To</th>
          </tr>
        </thead>
        <tbody>
          {array_time?.map((d, i) => (
            <tr key={i}>
              <td>
                {d.from}-{d.to}
              </td>
              <td></td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
};

export default TimeSlotsEditForm;