Firebase Data not Showing in React Schedule

I'm trying to display my firebase data to the React Schedule as event. I tried this code and it's not working. Is there a possible way to output my firebase data? see the image here

     const EventSettingsModel = {
        dataSource: [
          Object.keys(eventData).map((id) => {
            return [
              {
                Subject: eventData[id].title,
                StartTime: new Date(2021, 10, 19, 9, 30),
                EndTime: new Date(2021, 10, 19, 11, 0),
              },
            ];
          }),
        ],
      };
    
      return (
        <div>
          <ScheduleComponent
            width="100%"
            height="550px"
            currentView="Month"
            selectedDate={new Date()}
            eventSettings={EventSettingsModel}
          >
            <ViewsDirective>
            

  <ViewDirective option="Day" />
          <ViewDirective option="Week" />
          <ViewDirective option="WorkWeek" />
          <ViewDirective option="Month" />
          <ViewDirective option="Agenda" />
        </ViewsDirective>
        <Inject services={[Day, Week, WorkWeek, Agenda, Month]} />
      </ScheduleComponent>
    </div>
  );
}