FullCalendar Livewire & Alpine.js implementation error

I have the following Livewire component as my backend

class View extends Component
{
    public array $events = [];

    public function mount(): void
    {
        $this->events = $this->getReservations();
    }

    #[On('ReservationDeleted')]
    public function refreshEvents(): void
    {
        $this->events = $this->getReservations();
        $this->dispatch('eventsUpdated');
    }

    public function render(): ViewContract
    {
        return view('livewire.reservations.view')
            ->with(['events' => $this->events])
            ->layoutData(['header' => 'Meine Reservierungen']);
    }

    private function getReservations(): array
    {
        $reservations = Reservation::with('desk')
            ->where('start_date', '>=', now()->startOfDay())
            ->where('user_id', Auth::user()->id)
            ->where('series', false)
            ->orderBy('start_date')
            ->get();

        $events = [];

        foreach ($reservations as $reservation) {
            $events[] = [
                'title' => $reservation->desk->name . ' (' . $reservation->desk->location . ')',
                'start' => $reservation->start_date->toIso8601String(),
                'start_human' => $reservation->start_date->format('d.m.Y'),
                'end' => $reservation->start_date->toIso8601String(),
                'id' => $reservation->uuid,
                'allDay' => true,
                'duration' => $reservation->duration,
            ];
        }

        return $events;
    }
}

and the following frontend implementation

<div x-data="
    {
        calendar: null,
        calendarVisible: $persist(true),
        events: $wire.$entangle('events'),
        init() {
            $wire.on('eventsUpdated', () => {
                console.log(this.events);

                if (this.calendar) {
                    this.calendar.removeAllEvents();
                    this.calendar.addEventSource(this.events);
                    this.calendar.render();
                }
            })
            // Listen for Livewire initialization to set up the calendar
            this.$nextTick(() => {
                if (this.calendarVisible) {
                    this.initCalendar();
                }
            })
        },
        initCalendar() {
            // Initialize FullCalendar only when switching to calendar view
            if (!this.calendar) {
                this.calendar = new FullCalendar.Calendar(this.$refs.calendarElement, {
                    buttonText: {
                        today: 'Heute'
                    },

                    initialView: 'dayGridMonth',
                    navLinks: true,
                    weekends: false,
                    eventColor: '#D30E28',
                    locale: 'de',
                    height: 550,
                    eventDisplay: 'block',
                    events: this.events,
                    eventClick: function (info) {
                        $wire.dispatch('openModal', {
                            component: 'modal.view-reservation',
                            arguments: {
                                id: info.event.id
                            }
                        })
                    },
                    navLinkDayClick: function (date) {
                        // Get year, month, and day part from the date
                        const year = date.toLocaleString('default', {year: 'numeric'});
                        const month = date.toLocaleString('default', {month: '2-digit'});
                        const day = date.toLocaleString('default', {day: '2-digit'});

                        // Generate yyyy-mm-dd date string
                        const formattedDate = `${year}-${month}-${day}`;

                        window.location.assign('/reservation/create/' + formattedDate)
                    }
                });
            }

            this.calendar.render();
        },
        switchTab(tab) {
            if (this.calendarVisible !== (tab === 'calendar')) {
                this.calendarVisible = tab === 'calendar';

                if (this.calendarVisible) {
                    this.$nextTick(() => {
                        if (!this.calendar) {
                            this.initCalendar();
                        } else {
                            this.calendar.render();
                        }
                    });
                }
            }
        }
    }
">

But whenever an event gets deleted in the backend, I receive the following errors in the console

Alpine Warning: Duplicate key on x-for <template x-for=​"event in getEvents()​" :key=​"event.commitId">​…​</template>​

Alpine Expression Error: Cannot read properties of undefined (reading 'after')

Expression: "getEvents()"

I can't figure out where the problem is located to fix it.