Unable to render the calendar using FullCalendar.io in Aura component

Question

I get the error

Uncaught Error in $A.getCallback() [$(...).fullCalendar is not a function]
Callback failed: apex://CalenderClass/ACTION$getEvents

for the following code.

Component

<aura:component controller="CalenderCtrl" implements="force:appHostable">
    <ltng:require styles="{!$Resource.FullCalenderJs + '/fullCalendar/main.css'}"
                  scripts="{!join(',',
                           $Resource.FullCalenderJs  + '/fullCalendar/jquery-3.6.0.min.js',
                           $Resource.FullCalenderJs  + '/fullCalendar/moment.min.js',
                           $Resource.FullCalenderJs  + '/fullCalendar/main.min.js'
                           )}"
                  afterScriptsLoaded="{!c.afterScriptsLoaded}" />
    
    <aura:attribute name="events" type="Object[]" />
    <div aura:id="calendar"></div>
</aura:component>

Controller

({
    afterScriptsLoaded: function(cmp,evt,helper){
        var events = cmp.get("v.events");
        console.log(events);
        if(!events.length)
        {
            helper.fetchEvents(cmp);
        }
    },

})

Helper

({
    loadDataToCalendar :function(component,data){   
        var d = new Date();
        var month = d.getMonth()+1;
        var day = d.getDate();
        var currentDate = d.getFullYear() + '/' +
            (month<10 ? '0' : '') + month + '/' +
            (day<10 ? '0' : '') + day;   

            var ele = component.find('calendar').getElement();
            $(ele).fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                defaultDate: currentDate,
                editable: true,
                eventLimit: true,
                events:data
            });
        },
    
    tranformToFullCalendarFormat : function(component,events) {
        var eventArr = [];
        for(var i = 0;i < events.length;i++){
            eventArr.push({
                'id':events[i].Id,
                'start':events[i].StartDateTime,
                'end':events[i].EndDateTime,
                'title':events[i].Subject
            });
        }
        return eventArr;
    },
    
    fetchEvents : function(component) {
        var action = component.get("c.getEvents"); 
        var self = this;
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS"){
                var eventArr = self.tranformToFullCalendarFormat(component,response.getReturnValue());
                self.loadDataToCalendar(component,eventArr);
                component.set("v.events",eventArr);
            }
        });
        
        $A.enqueueAction(action); 
    }, 
})

Apex Controller

public class CalenderCtrl {
    
    @AuraEnabled
    public static List<Event> getEvents(){
        return [SELECT EndDateTime,Id,StartDateTime,Subject FROM Event];
    }
}

I referred to the initialization code here and updated the code in helper method loadDataToCalendar as follows:

loadDataToCalendar :function(component,data){   
        var d = new Date();
        var month = d.getMonth()+1;
        var day = d.getDate();
        var currentDate = d.getFullYear() + '/' +
            (month<10 ? '0' : '') + month + '/' +
            (day<10 ? '0' : '') + day;   

            var ele = component.find('calendar').getElement();
            var calendar = new FullCalendar.Calendar(ele, {
          initialView: 'dayGridMonth'
        });
        calendar.render();

        },

I still get an error Uncaught Error in $A.getCallback() [FullCalendar is not defined]

Can anyone help me with what I'm missing here?

I could get this far thanks to this answer.