FullCalendar does not load events generated by a function in react

I am trying to load events into FullCalendar in a react component. The events are generated by a function as stated in the documentation: https://fullcalendar.io/docs/events-function

However, while I make sure that the events are correctly produced, after using them in successCallback they are not rendered in the calendar.

I uploaded a minimal working example here: https://codesandbox.io/p/sandbox/sharp-kepler-3ldk7v?workspaceId=ws_RQ7L817Z3HHmu4JAtwzcQz

The main part that should be relevant is extracted here:

function refetchEvents() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const events = [
            {
              id: 1,
              title: "All-day event",
              start: todayStr,
            },
            {
              id: 2,
              title: "Timed event",
              start: todayStr + "T12:00:00",
              end: todayStr + "T12:30:00",
            },
          ];
        resolve(events);
      }, 1000);
    });
  }

  function updateRange(fetchInfo, refetch) {
    const newRange = { start: fetchInfo.startStr, end: fetchInfo.endStr };
    if (range.start !== newRange.start || range.end !== newRange.end) {
      setRange(newRange);
      setTimeout(() => {
        refetch();
      }, 0);
    }
  }

  const fetchCalendarEvents = (fetchInfo, successCallback, failureCallback) => {
    updateRange(fetchInfo, () => {
      refetchEvents()
        .then((response) => {
          successCallback(response);
        })
        .catch((error) => {
          console.error("Error fetching events:", error);
          failureCallback(error);
        });
    });
  };


return (<FullCalendar
              ref={calendarRef}
              plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
              ...
              events={fetchCalendarEvents}
              ...
            />
)

A ticket from the developers got closed as they stated a problem with state management, but from my understanding, state management should not be relevant for this minimal example but only for preserving events states: https://github.com/fullcalendar/fullcalendar/issues/7864#issuecomment-2611067759

The problem is with the fetchCalendarEvents function. Inside this you are calling the updateRange and passing the actual function as a callback to this function. And again you are calling this function inside a setTimeout. This is resulting in a Callback Hell and the function is not properly returning the events list.

I've refactored the 2 functions like this:

function updateRange(fetchInfo) {
  const newRange = { start: fetchInfo.startStr, end: fetchInfo.endStr };
  if (range.start !== newRange.start || range.end !== newRange.end) {
    setRange(newRange);
  }
}

const fetchCalendarEvents = (fetchInfo, successCallback, failureCallback) => {
  updateRange(fetchInfo);

  refetchEvents()
    .then((response) => {
      let result = [
        {
          id: 1,
          title: "All-day event",
          start: "2025-01-27",
        },
        {
          id: 2,
          title: "Timed event",
          start: todayStr + "T12:00:00",
          end: todayStr + "T12:30:00",
        },
      ];
      successCallback(result);
    })
    .catch((error) => {
      failureCallback(error);
    });
};

You can see in this forked demo that it is working as expected.