React FullCalendar stuck in loop

Question

Based on the answer to my previous question I am able to handle basic calling of events by function in fullCalendar. I did have a problem with being stuck in callback hell.

However that only solved the for my simplified example.

My actual events come from a query call that I receive from a UseQuery statement. I use the refetch attribute as a promise in the fetchCalendarEvents function, but that results in an endless loop of calling the same API call over and over again.

Here are the used API calls:

const queryEvents = (range, filter = null) => {
    return useQuery(['events', range, filter], fetchEventData, {
        enabled: !!range.start && !!range.end, // Only fetch if range is valid
    });
};

const fetchEventData = async () => {
            const config = {
            params: {
                start: range.start,
                end: range.end,
                filter,
            },
            };
            const response = await axios.get(`${path}/events`, config);
            return response;
        };

And the code for my actual react component:

const { data: events = null, refetch: refetchEvents } = queryEvents(range);

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) => {
            successCallback(response); // Pass the fetched events directly to FullCalendar
        })
        .catch((error) => {
            console.error('Error fetching events:', error);
            failureCallback(error); // Notify FullCalendar of the failure
        });
  };

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

This code shows the events for a second before it reloads again.

I found the solution to use fetchEventData instead of refetchEvents directly in fetchCalendarEvents, but that leads to triggering the time consuming API call a lot of times, and I wanted to use the advantageous caching mechanisms of the useQuery method.