Livewire Pagination Button does not work

Hello Guys, here is my code

@include('partials.header')

<div class="app-content">
    <div class="content-wrapper">
        <div class="container">
        @include('partials.menu-back')
            <div class="row">
                <div class="col card">
                    <div class="tab-content" id="myTabContent">
                        <div class="page-description page-description-tabbed">
                            <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="account-tab" data-bs-toggle="tab"
                                            data-bs-target="#account" type="button" role="tab" aria-controls="account"
                                            aria-selected="true">Past
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="security-tab" data-bs-toggle="tab"
                                            data-bs-target="#security" type="button" role="tab" aria-controls="security"
                                            aria-selected="false">Upcoming
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <div class="tab-pane fade show active" id="account" role="tabpanel"
                             aria-labelledby="account-tab">
                            <div class="">
                                <div class="">
                             @livewire('event-component',['events' => $pastEvents])
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
                            <div class="">
                                <div class="">
                                    @livewire('event-component',['event'=>$upcomingEvents])
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('partials.footer')

My header and footer have @livewirestyles and @livewirescripts respectively.

My Component Blade file

    <div class="card-body">


    <div class="row">
        @if($eventData->isEmpty())
            <div class="col">
                <h2 style="color: lightgrey" class="text-center">No Events found.</h2>
            </div>
        @else
            @foreach ($eventData as $event)
                <div class="col-xl-3 mb-4">
                    <a href="{{ route('view-single-event', ['eventID' => $event->id]) }}"
                       class="card-link">
                        <div
                            class="card border-gray h-100 hover-overlay hover-zoom hover-shadow ripple">
                            <div class="bg-image">
                                <img src="{{$event->event_logo}}"
                                     class="w-100 event-img"
                                     alt="...">
                                <a href="#">
                                    <div class="mask"
                                         style="background-color: hsla(195, 83%, 58%, 0.2)"></div>
                                </a>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">{{$event->name}}</h5>
                                <span
                                    class="badge badge-{{ now()->gt($event->end_date) ? 'warning' : 'success' }} mt-2 mb-2">
                                    {{ now()->gt($event->end_date) ? 'Event ended' : 'Upcoming' }}
                                </span>
                                <div class="row mt-2">
                                    <div class="col">
                                        <p class="card-text">
                                            <small class="text-muted">
                                                <span class="material-icons md-18"
                                                      style="vertical-align: middle">date_range</span>
                                                {{ date('d M, Y', strtotime($event->start_date)) }}
                                            </small>
                                        </p>
                                        <p class="card-text">
                                            <small class="text-muted">
                                                <span class="material-icons md-18"
                                                      style="vertical-align: middle">schedule</span>
                                                {{ date('h:i A', strtotime($event->start_date)) }}
                                                - {{ date('h:i A', strtotime($event->end_date)) }}
                                            </small>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
            <div class="col-12">
                @if ($eventData->hasPages())
                    {{ $eventData->links() }}
                @endif

            </div>
        @endif
    </div>
</div>

Component Class

namespace App\Livewire;


use Livewire\Component;
use Livewire\WithPagination;

class EventComponent extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';
    private $events;

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

    public function render()
    {
        return view('livewire.event-component', ['eventData' => $this->events]);
    }
}

The Events collection passed to the Livewire Component has been paginated already from the Model.

        $upcomingEvents = EventModel::where('event_creator_id', $userId)
            ->where('end_date', '>', Carbon::now())
            ->paginate(8);

        $pastEvents = EventModel::where('event_creator_id', $userId)
            ->where('end_date', '<', Carbon::now())
            ->paginate(8);

Everything works, but clicking on the pagination link throws

Error
PHP 8.2.4
11.2.0
Call to a member function isEmpty() on null

<div class="row">

        @if($eventData->isEmpty())

            <div class="col">

                <h2 style="color: lightgrey" class="text-center">No Events found.</h2>

            </div>