Moment. JS увеличение времени с помощью рекурсивной функции - компоненты React

Question

У меня проблема с рендерингом нескольких компонентов, отображающих правильное время с помощью Moment. Js Я работаю в React с React Hooks. Вот как выглядит мой объект состояния. На данный момент я жестко запрограммировал время открытия и закрытия.

const [stateObj, setStateObj] = useState({
titles: ['Doctor', 'Assistant', 'Hygienist'],
officeHours: {open: moment().set({'hour': 8, 'minute': 0, 'second': 0}), close: moment().set({'hour': 17, 'minute': 0})}

})

Я написал рекурсивную функцию для создания массива раз, каждые полчаса, между открытием и закрытием раз. Моя проблема в том, что когда я отображаю массив и отображаю несколько компонентов, время начала становится все позже и позже. У меня console.log вышибло мозги, и я не понимаю, что происходит и почему время увеличивается на 30 минут.

officeHours проходит через props, пока не попадет в этот компонент, который используется для создания 3 разных столбцов. У каждого столбца свой заголовок, но один и тот же officeHours.:

import React from 'react'

import '../../styles/calendar.css' import CalendarColumn from './CalendarColumn'

const CalendarTable = (props) => {

const {officeHours, titles} = props


return(
    <div className="calendarTable showMe p-1 d-flex justify-content-between align-items-center">
        {
            titles.map((title, index) => {
                console.log(title, officeHours.open._d)
                return (
                    <CalendarColumn
                        key={index}
                        title={title}
                        officeHours = {officeHours}
                    />
                )
            })
        }
    </div>
)

}

Оттуда, внутри каждого столбца отображаются officeHours для создания timeSlot с уникальным временем:

const CalendarColumn = (props) => {

const {title, officeHours} = props

const makeTimeSlotArr = (startTime, endTime, timeSlotArr=[]) => {

    if (moment(startTime).get('hour') === moment(endTime).get('hour')) {
        timeSlotArr.unshift(moment().set({'hour': 8, 'minute': 0})._d) /**Hack BS, but the show must go on */
        return timeSlotArr
    }

    timeSlotArr.push(startTime._d)
    startTime = moment(startTime.add(30, 'm'))

    return makeTimeSlotArr(startTime, endTime, timeSlotArr)
}

const timeSlotArr = makeTimeSlotArr(officeHours.open, officeHours.close)

return(
    <div className="calendarColumn p-1 mx-5">
        {
            timeSlotArr.map((timeSlot, index) => {
                return (
                    <CalendarRow
                        key = {index}
                        timeSlot = {timeSlot}
                        title = {title}
                    />
                )
            })
        }
       
    </div>
)

}

А вот компонент CalendarRow, если вы хотите его увидеть.

const CalendarRow = (props) => {

const {title, timeSlot} = props

return(
    <div className="calendarRow showMe mb-1">
        <h1>{moment(timeSlot).format('LT')}</h1>
    </div>
)

}

А вот скриншот того, что происходит с некоторыми console.logs. Любая помощь или предложения будут очень признательны! Я прочесываю момент. js документов, чтобы убедиться, что я не делаю что-то не так, но, насколько я могу судить, это должно работать правильно.

скриншот проблемы