React: How to get useEffect reducer function work with react-datepicker?

Question

I'm trying to get useEffect hook to show me user-chosen times after they pick them from dropdown. My co-worker helped me start the hook usage, but I'm completely lost on what should I do. After few days of attempts, I must ask for help.

At the moment, it correctly shows the time from the database, when the page is loaded, but gives NaN, when the user has chosen any number... Picture of correctly spawned table below (database values).

In short: TimeClass is the dropdown selection I'm trying to get the new time information (reservations) into TimeChanger. Everything is fine from there on out, it just saves into the database as I've planned.

Main:

export default () => {

  // collect the necessary information from the database
  const {data: reservationsData} = useAxios(`/api/reservations`);

  const [reservations, reservationsDispatch] = useReducer(reservationsReducer,reservationsData);
  useEffect(() => {
    reservationsDispatch({
      type: 'replace',
      data: reservationsData
    });
  }, [reservationsData]);

  const startPicker = reservations[row - 1].start_time;
  const endPicker = reservations[row - 1].end_time;
  const start = moment(startPicker, "hh:mm:ss").toDate();
  const end = moment(endPicker, "hh:mm:ss").toDate();

  //return everything
  return (
    <Page>
      { 
      // ... all code inside here is actually in other function, 
      // just trying to make it shorter and putting it here  
      }

      { _.times(2, (column)=>
        <TimeClass
          key={column}
          time={start} 
          endTime={end} 
          column={column} // creates 2 columns of times
          setTime={time => reservationsDispatch({
            type: 'setTime',
            row, // chooses, which row in the table the time goes
            col, // makes sure we are in col1, not confused with column
          })}
        />
      )}
      <TimeChanger
        row={row}
        reservations={reservations}
      />
    </Page>
  );
}

TimeClass:

function TimeClass ({ time, endTime, column, setTime }) {

  // changes "time", if needed
  if (column === 1) {
    time = endTime;
  }

  return (
      <DatePicker
        selected={time}
        onChange={setTime}
        showTimeSelect
        showTimeSelectOnly
        timeIntervals={15}
        timeCaption="Time"
      />
  );
}

reservationReducer:

function reservationsReducer(state, action) {
  switch (action.type) {
    case 'replace':
      return action.data;
    case 'setTime':
      // what should be put here? How to get info here and out of here
      return TimeClass(/* what to return */);
    default:
      throw new Error();
  }
}