fullCalendar Not Populating Fetch Response

Question

I have a single event array of objects that I want to post to the fullCalendar. If I create an array of objects that isn't dynamic from a fetch response, it works fine. I get the items from a fetch, create a new object with the response, then push each individual object to an array. Before my .catch(), I $('#calendar').fullCalendar('addEventSource', approvedReq); then in my .fullCalendar initialization, I define the array I created as the event source. Please see my code below:

const requestsApproved = new Request(
    "/items?$expand=EmployeeName&$select=ID,Title,EmployeeName/Title,EmployeeName/Id,StartDate,EndDate,TotalHours,Status&$filter=Status eq 'Approved'"
    , {
        method: 'GET',
        credentials: 'include',        
        headers: new Headers({
            "Accept": "application/json; odata=verbose",
        })
    }
);

const approvedReq = [];

fetch(requestsApproved)
    .then((response) => response.json())
    .then((data) => {
        const items = data.d.results;
        items.forEach((item) => {
            const approveReqItems =
            {
                id: item.ID,
                title: item.Title,
                start: item.StartDate,
                description: 'Request',
                end: item.EndDate,
                color: '#104723',
                textColor: '#b3ab7d',
            };
            approvedReq.push(approveReqItems);
            //console.log(item.Title,item.EventDate,item.EndDate);
        });
        console.log(approvedReq);
        $('#calendar').fullCalendar('addEventSource', approvedReq);
}).catch((error) => {
    console.error('Error:', error);
});
    
$('#calendar').fullCalendar({
  header: {
        left: 'prev,next today',
        center: '',
        right: 'title month,agendaWeek'
    },
    events: approvedReq,
    displayEventTime: false,
});

<link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' />
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery-ui.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script>

<div id="calendar"></div>