I am using the package @fullcalendar/react to create a calendar in my admin dashboard website. What I want is to allow admins to add events and they would show up in the full calendar from the firebase firestore database.

But when I fetch my events collection it just displays nothing in the calendar.

What am I doing wrong? Why are the events not showing up?

Here is the console log of my eventsData Array.

Here is my code:

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import BootstrapTheme from "@fullcalendar/bootstrap";
import firebase from '../../firebase';

const Calender = props => {

 const [eventsData, setEventsData] = useState({})

 const getEventsData = async () => { 
    await firebase.firestore().collection("Events").get().then((snapshot) => {
      const events = snapshot.docs.map(event => event.data());
      setEventsData(events)
      console.log(events)
    }).catch((e) => {
      console.log(e + "fetching error")
    })
  }

 useEffect(() => {
    getEventsData()
  },[])


       return(

                   <FullCalendar
                        plugins={[
                          BootstrapTheme,
                          dayGridPlugin,
                          interactionPlugin,
                        ]}
                        slotDuration={"00:15:00"}
                        handleWindowResize={true}
                        themeSystem="bootstrap"
                        headerToolbar={{
                          left: "prev,next today",
                          center: "title",
                          right: "dayGridMonth,dayGridWeek,dayGridDay",
                        }}
                        events={eventsData}
                        editable={true}
                        droppable={true}
                        selectable={true}
                   
                      />

              )
            }