I am using FullCalendar v5 (as I am developing the website using a template using v5). The following are the code in my frontend file to initiating the calendar:

var date = new Date()
var d = date.getDate(),
    m = date.getMonth(),
    y = date.getFullYear()

var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');

// initialize the external events
// -----------------------------------------------------------------
var calendar = new Calendar(calendarEl, {
    headerToolbar: {
        left: 'prev,next,today',
        center: 'title',
        right: ''
    },
    themeSystem: 'bootstrap',
    events: {
        url: '/load/load_event.php,
        method: 'GET',
        failure: function () {
            alert('there was an error while fetching events!');
        }
    }
});
calendar.render(); 

And the JSON return for the load_event.php is as follows:

[
  {
    "id": 1,
    "Title": "Not Available",
    "Start": "2022-07-21",
    "End": "2022-08-05",
    "backgroundColor": "#FF0000",
    "borderColor": "#FF0000"
  }
] 

I can render the calendar without problem, but the event is not showing on my calendar, is there something I missed?