React FullCalendar console error changedOptionNames is not iterable - reactjs

Question

I am trying to use fullCalendar on my react project and I followed the steps that I saw on their docs, all plugins library that I am using, I install and imported but when I try to use eventsSet and change the State function I got a console error.
If I comment the eventsSet the Calendar works, does someone know what could be causing this?
my code:
https://github.com/wandersonce/Admin-Dashboard/blob/main/src/scenes/calendar/index.jsx
<pre>
import { useState } from 'react';
import FullCalendar from '#fullcalendar/react';
import { formatDate } from '#fullcalendar/core';
import dayGridPlugin from '#fullcalendar/daygrid';
import timeGridPlugin from '#fullcalendar/timegrid';
import interactionPlugin from '#fullcalendar/interaction';
import listPlugin from '#fullcalendar/list';
import {
Box,
List,
ListItem,
ListItemText,
Typography,
useTheme,
} from '#mui/material';
import Header from '../../components/Header';
import { tokens } from '../../theme';
export default function Calendar() {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const [currentEvents, setCurrentEvents] = useState([]);
const handleDateClick = (selected) => {
const title = prompt('Please enter a new title for your event');
const calendarApi = selected.view.calendar;
calendarApi.unselect();
if (title) {
calendarApi.addEvent({
id: `${selected.dateStr}-${title}`,
title,
start: selected.startStr,
end: selected.endStr,
allDay: selected.allDay,
});
}
};
const handleEventClick = (selected) => {
if (
window.confirm(
`Are you sure you want to delete the event '${selected.event.title}'`
)
) {
selected.event.remove();
}
};
return (
<Box m="20px">
<Header title="Calendar" subtitle="Full Calendar Interactive Page" />
<Box display="flex" justifyContent="space-between">
{/* CALENDAR SIDEBAR */}
<Box
flex="1 1 20%"
backgroundColor={colors.primary[400]}
p="15px"
borderRadius="4px"
>
<Typography variant="h5">Events</Typography>
<List>
{currentEvents.map((event) => (
<ListItem
key={event.id}
sx={{
backgroundColor: colors.greenAccent[500],
margin: '10px 0',
borderRadius: '2px',
}}
>
<ListItemText
primary={event.title}
secondary={
<Typography>
{formatDate(event.start, {
year: 'numeric',
month: 'short',
day: 'numeric',
})}
</Typography>
}
/>
</ListItem>
))}
</List>
</Box>
{/* CALENDAR */}
<Box flex="1 1 100%" ml="15px">
<FullCalendar
height="75vh"
plugins={[
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin,
]}
headerToolbar={{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
}}
initialView="dayGridMonth"
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
select={handleDateClick}
eventClick={handleEventClick}
initialEvents={[
{
id: '12315',
title: 'All-day event',
date: '2022-09-14',
},
{
id: '5123',
title: 'Timed event',
date: '2022-09-28',
},
]}
eventsSet={(events) => setCurrentEvents(events)}
/>
</Box>
</Box>
</Box>
);
</pre>
and the error: