TypeError: Невозможно прочитать свойство 'calendar' из неопределенного

Question

Я создаю приложение, используя реагирование, машинопись и fullCalendar .

Я хочу, чтобы в моем root компоненте setState из выбранного диапазона данных в компоненте fullcalendar. Когда я выбираю диапазон данных, я получаю эту ошибку:

TypeError: Невозможно прочитать свойство 'calendar' из неопределенного - (страница 1/2) TypeError: Невозможно прочитать свойство 'getApi' из null - (стр. 2/2)

в этой строке

   useEffect(() => {
   -->   calendarApi = calendarComponentRef.current!.getApi();    
   });

Это мой код:

import React, { Dispatch, SetStateAction, useContext, useEffect } from 'react';
import FullCalendar from '@fullcalendar/react';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import { WizardContext } from '../../ReservationWizard/ReservationWizard';
import { EventInput } from '@fullcalendar/core';

type CalendarProps = {
  startDate: Date;
  endDate: Date;
  setStartDate: Dispatch<SetStateAction<Date>>;
  setEndDate: Dispatch<SetStateAction<Date>>;
};

const Calendar: React.FC<CalendarProps> = (props) => {
  const { changePage, currentPage } = useContext(WizardContext);
  const calendarComponentRef = React.createRef<FullCalendar>();
  let calendarApi: any;

  useEffect(() => {
     calendarApi = calendarComponentRef.current!.getApi();
  });

  const customButtons = {
     previous: {
        text: '<',
        click() {
          calendarApi.prev();
        },
    },
    further: {
        text: '>',
        click() {
          calendarApi.next();
        },
   },
   };

   const getReservationTime = (event: EventInput) => {
      const { start, end } = event;
      if (start && end) {
         startDate = new Date(start.toString());
         endDate = new Date(end.toString());
         props.setStartDate(startDate);
         props.setEndDate(endDate);
     }
   };


  return (
    <div className='calendar-container'>
      <FullCalendar
        ref={calendarComponentRef}
        defaultView='dayGridMonth'
        plugins={[interactionPlugin, dayGridPlugin]}
        selectable={true}
        header={{
          left: '',
          center: 'previous, title, further',
          right: '',
        }}
        customButtons={customButtons}
        dateClick={getReservationTime}
        select={getReservationTime}
      />
     </div>
    );};

 export default Calendar;

Если я удалю из getReservationTime () эту часть кода:

 props.setStartDate(startDate);
 props.setEndDate(endDate);

Все без установленного диапазона дат в setState работает правильно. Я могу выбрать в своем календаре много дней без сбоев приложения