How to display custom event info using FullCalander v6 with react

Question

I am trying to create an appointment planner and I want to be able to show the description of the appointment as well as participants.

I've been going over the documentation on the site https://fullcalendar.io/ for awhile and thought maybe the eventContent prop would do the trick but I can't get it to work.

const CalendarComponent = ({appointments}) => {
  const renderEventContent = (eventInfo) => {
    console.log(eventInfo);
    return (
      <>
        <b>{eventInfo.timeText}</b>
        <i>{eventInfo.event.title}</i>
      </>
    )
  };

  return (
    <FullCalendar 
      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
      headerToolbar={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }}
      initialView='dayGridMonth'
      editable={true}
      selectable={true}
      selectMirror={true}
      dayMaxEvents={true}
      displayEventEnd={true}
      weekends={true}
      events={appointments}
      eventContent={renderEventContent} // custom render function
    />
  );
};

Any ideas? All that shows when I use the renderEventContent function is the timeText prop.