Javascript 如何使用react在fullcalendar中添加事件？

我试图通过动态添加事件来创建日历，当我将一个事件添加到状态数组时，它不会更新日历，即它不会显示在日历上。我的代码如下：

import React, { useState } from 'react';
import Page from '../../Components/Page/Page';
import FullCalendar from '@fullcalendar/react';
import DayGridPlugin from '@fullcalendar/daygrid';
import Modal from 'react-modal';
import Button from '../../Components/Button/Button';
import AddEventModal from './AddEventModal';

export default function () {
  const [addModalOpen, setAddModalOpen] = useState(false);
  const [events, setEvents] = useState([]);

  const onEventAdded = (event) => {
    setEvents([...events, event]);
  };

  return (
    <Page>
      <Button
        className="bg-blue-500 text-white"
        onClick={() => setAddModalOpen(true)}
      >
        New Event
      </Button>
      <div className="relative z-0">
        <FullCalendar
          plugins={[DayGridPlugin]}
          events={events}
          initialView="dayGridMonth"
        />
      </div>

      <AddEventModal
        isOpen={addModalOpen}
        onClose={() => setAddModalOpen(false)}
        onEventAdded={(event) => onEventAdded(event)}
      />
    </Page>
  );
}

从“React”导入React，{useState}；
从“../../Components/Page/Page”导入页面；
从“@FullCalendar/react”导入FullCalendar；
从“@fullcalendar/daygrid”导入DayGridPlugin；
从“反应模态”导入模态；
从“../../Components/Button/Button”导入按钮；
从“./AddEventModel”导入AddEventModel；
导出默认函数（）{
常量[addModalOpen，setAddModalOpen]=useState（false）；
const[events，setEvents]=useState（[]）；
const onEventAdded=（事件）=>{
setEvents（[…事件，事件]）；
};
返回(
setAddModalOpen（真）}
>
新事件
setAddModalOpen（假）}
onEventAdded={（事件）=>onEventAdded（事件）}
/>
);
}

我需要掌握日历API

  const onEventAdded = (event) => {
    const api = calendarRef.current.getApi();
    api.addEvent(event);
  };