How to add event in fullcalendar using react?

Question

Im trying to make a calendar with adding events dynamically, and when I add one to the state array, it doesn't update the calendar, ie it doesnt show on the calendar. My code is following:

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>
  );
}

Answer 1

I needed to get a hold of calendar API.

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