Problem with spreading on a useState? useState causing unexpected issues

I am creating a Working Day hour picker. You are able to select hours from pickers that you want to work for a certain day. I'm getting a working_hours prop that is a 2D array, which holds the hours for a given index. It's my first image. If I edit an hour.. It will default the next indexes to 12:00AM. I didn't receiving during testing and am wondering if it has something to do with the useState controlling everything. I used a spread operator just so I wouldn't mutate any data and also because it doesn't seem to like when I just pass the working_hours prop right to it.

I'm not sure if this is a problem with my logic or how I'm handling the useState. Any help would be apprieciated.

PS. The array can have nulls, this would indicate a working day isn't being worked.

import {workingDaysOfWeek} from "../constants/user.constants"
import {KeyboardTimePicker, MuiPickersUtilsProvider} from "@material-ui/pickers"
import DateFnsUtils from "@date-io/date-fns"
import {List, ListItem, Typography} from "@material-ui/core"
import {ListItemSegment, useWorkingDaysStyles} from "./WorkingDaysDisplay"
import {InlineConfirm} from "./InlineConfirm"
import {useState} from "react"


const WorkingDaysEdit = ({
    working_hours,
    onSave,
}) => {
  const styles = useWorkingDaysStyles()
  const [dayHours, setDayHours] = useState([...working_hours])
  console.log(dayHours)

  const setDayHour = (dayHours, index) => setDayHours([
    ...dayHours.slice(0, index),
    dayHours,
    ...dayHours.slice(index + 1)
  ])


  function handleStartChange(index, hours) {
    let formattedDate = new Date(hours).toISOString()
    if (dayHours[index][1] === null){
      dayHours[index] = [formattedDate , null]
    }
    setDayHour(
      dayHours[index][1] || formattedDate ?
        [formattedDate, dayHours[index][1]] : null,
      index
    )
  }

  function handleEndChange(index, hours) {
    let formattedDate = new Date(hours).toISOString()
    if (dayHours[index][0] === null) {
      dayHours[index] = [null, formattedDate]
    }
    setDayHour(
      dayHours[index][0] || formattedDate ?
        [dayHours[index][0], formattedDate] : null,
      index
    )
  }

  const onCancel = () => {
    // setWorkWeekHoursState([...starterData])
  }
  const onClickSave = () => {
    onSave(dayHours)
  }

  return <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <List {...{
      dense: true,
      className: styles.list
    }} >
      <Typography variant={'h6'} align={'center'}>
        Schedule
      </Typography>
      <InlineConfirm {...{
           onConfirm:  onClickSave,
            onCancel: onCancel
      }}/>
      {dayHours &&
        workingDaysOfWeek.map((day, index) => (
          <ListItem className={styles.listItem} key={index}>
            <ListItemSegment className={styles.dayOfWeekSegment}>{workingDaysOfWeek[index]}</ListItemSegment>
            <ListItemSegment>
              <KeyboardTimePicker
                margin="normal"
                label="Start Time"
                value={dayHours[index] ? dayHours[index][0] : null}
                onChange={hours => handleStartChange(index, hours)}
                KeyboardButtonProps={{
                  'aria-label': 'change time',
                  shrink: true
                }}
              />
            </ListItemSegment>
            <ListItemSegment>
              <KeyboardTimePicker
                margin="normal"
                label="End Time"
                value={dayHours[index] ? dayHours[index][1] : null}
                onChange={hours => handleEndChange(index, hours)}
                KeyboardButtonProps={{
                  'aria-label': 'change time',
                }}
              />
            </ListItemSegment>
          </ListItem>
        ))
      }
    </List>
  </MuiPickersUtilsProvider>
}

export default WorkingDaysEdit