How to update events from event array by using reducer and handling events?

I am using fullcalendar to show all events in my React app.

Ideally, the prev and next event handlers should re-render events.

Here's my code.

calender_slice.js

const slice = createSlice({
  name: 'calendar',
  initialState,
  reducers: {
    getEvents(state, action) {
      const { timecards } = action.payload;

      const timecard_events = timecards.map(timecard => {
        return {
          title: `${timecard.first_name} ${timecard.last_name}(${timecard.role})`,
          start: timecard.clock_in,
          end: timecard.clock_out,
          color: '#'+Math.floor(Math.random()*16777215).toString(16)
        }
      })

      state.events = [...timecard_events];

      state.isLoading = false;
    },
    ...
export const getEvents = (
  start_date = moment().startOf('month').toString(),
  end_date = moment().toString()
) => async (dispatch) => {
  dispatch(slice.actions.setLoading(true));

    const res = await axios.post(`${backend}/timecards`, {
      start_date,
      end_date
    })

    dispatch(slice.actions.getEvents({timecards: res.data.timecards}));
};

calendar_view.js

const CalendarView = () => {
    const calendarRef = useRef(null);
    const dispatch = useDispatch();
    const { events, isModalOpen, selectedRange, isLoading } = useSelector((state) => state.calendar);

    const handleDatePrev = async () => {
      const calendarEl = calendarRef.current;

      if (calendarEl) {
        const start_date = moment(calendarEl.props.defaultDate).subtract(1, 'month').startOf('month').format();
        const end_date = moment(calendarEl.props.defaultDate).subtract(1, 'month').endOf('month').format();
        const calendarApi = calendarEl.getApi();

        try {
          await dispatch(getEvents(true, start_date, end_date));
        } catch (err) {
          console.error(err);
        }

        calendarApi.prev();
        setDate(calendarApi.getDate());
      }
    };

  return (<Container maxWidth={false}>
          <Header onAddClick={handleAddClick} />
          <Toolbar
            date={date}
            onDateNext={handleDateNext}
            onDatePrev={handleDatePrev}
            onDateToday={handleDateToday}
            onViewChange={handleViewChange}
            view={view}
          />
          <Paper className={classes.calendar}>
            <FullCalendar
              allDayMaintainDuration
              defaultDate={date}
              defaultView={view}
              eventResizableFromStart
              eventResize={handleEventResize}
              events={events}
              header={false}
              height={800}
              ref={calendarRef}
              rerenderDelay={10}
              weekends
              plugins={[
                dayGridPlugin,
                timeGridPlugin,
                interactionPlugin,
                listPlugin,
                timelinePlugin
              ]}
            />
          </Paper>
        </Container>
  )
}

This code works fine and dispatches events each time correctly, but fullcalendar doesn't show updated events array.

I wonder what value I should get as a current date.