React 18 FullCalendar 5 how can I go about finding the next X upcoming events?

Adding React Full Calendar with the RRule Plugin. I have an array of calendar events, how would I go about finding the next X number calendar events? So if today is Friday and my next two events are on Monday and Wednesday next week, I want to be able to display those on a different component. This isn't for displaying the events on the calendar, but rather on the dashboard I want to show the user what their next two events are. I can do the date comparison, I just haven't found in their docs how to get all of the upcoming events and return the objects.

useEffect(() => {
    // get all calendar items, find next two events
    var today = new Date().getTime();
    INITIAL_EVENTS.forEach(i => {
        console.log(i.rrule)
    });
}, [INITIAL_EVENTS])

const INITIAL_EVENTS = [
        {
            id: 321,
            title: 'Last Friday of every month',
            color: 'orange',
            rrule: {
              freq: 'monthly',
              interval: 1,
              byweekday: [CALENDAR_ENUM.Friday],
              bysetpos: -1,
              dtstart: '2022-02-01',
              until: '2028-06-01'
            }
        },
        {
            id: 321,
            title: 'First Friday of every Third month',
            color: 'pink',
            rrule: {
              freq: 'monthly',
              interval: 3,
              byweekday: [CALENDAR_ENUM.Friday],
              bysetpos: 1,
              dtstart: '2022-02-01',
              until: '2028-06-01'
            }
        },
    ]
...

<FullCalendar
    plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, rrulePlugin]}
    headerToolbar={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    }}
    initialView='dayGridMonth'
    editable={true}
    selectable={true}
    selectMirror={true}
    dayMaxEvents={true}
    initialEvents={INITIAL_EVENTS}
    select={createEventFromSelectedDate}
    eventContent={renderEventContent}
    eventClick={showHideAddEventHandler}
    eventsSet={handleEvents}
/>

Unfortunately it seems that out of the box, FullCalendar and RRulePlugin do not have such a solution, or I have not found it. So basic filtering and mapping is the way to go.

let todayStr = new Date().toISOString().replace(/T.*$/, '')

useEffect(() => {
    let calendarApi = calendarRef.current.getApi();
    
    let events = calendarApi.getEvents(); // Get calendar events
    let calendarEvents = events.map(i => i.toPlainObject()); // Convert to raw object
    let filteredEvents = calendarEvents.filter(i => i.start >= todayStr); // filter against todays date
    let sorted = filteredEvents.sort((a, b) => a.start.localeCompare(b.start)); // Sort
    console.log(sorted.slice(0, 4)); // return
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [calendarRef]);