Filament with Livewire, sort and search not working

<div class="relative overflow-x-auto">
    {{ $this->table->render() }}
</div>

<div class="relative overflow-x-auto">
    {{ $this->table->render() }}
</div>

@filamentStyles

<x-app-layout>
    <!-- Header -->
    <x-header title="Credential Generation" />
    <div x-data="{ activeTab: 'student-portal-account'}">
        <x-tab-navigation tab1Title="Student Portal Account" tab2Title="PLM Email" />
        <!-- Student Portal Account Tab -->
        <div x-show="activeTab === 'student-portal-account'">
            <section class="p-4 rounded-lg" role="tabpanel" aria-labelledby="student-portal-account-tab">
                <!-- Buttons Container -->
                <div class="flex items-center justify-between mb-4">
                    <x-email-all-button callback="handleEmailAll" button-text="Email all" />
                    <x-edit-email-template-button modal-id="sp-account-modal"
                        modal-title="Student Portal Account Email Template" />
                </div>
                <!-- Pending Credentials Table -->
                <livewire:list-pending-email-student-portal />
            </section>
        </div>
        <!-- PLM Email Tab -->
        <div x-show="activeTab === 'plm-email'">
            <section class="p-4 rounded-lg" role="tabpanel" aria-labelledby="plm-email-tab">
                <!-- Buttons Container -->
                <div class="flex items-center justify-between mb-4">
                    <x-email-all-button callback="handleEmailAll" button-text="Email all" />
                    <x-edit-email-template-button modal-id="plm-email-modal"
                        modal-title="PLM Email Credentials Email Template" />
                </div>
                <!-- Pending Credentials Table -->
                <livewire:list-pending-email-p-l-m-email />
            </section>
        </div>
    </div>
</x-app-layout>

@vite('resources/js/credential-generation-dashboard.js')

@filamentStyles

<x-app-layout>
    <!-- Header -->
    <x-header title="Credential Generation" />
    <div x-data="{ activeTab: 'student-portal-account'}">
        <x-tab-navigation tab1Title="Student Portal Account" tab2Title="PLM Email" />
        <!-- Student Portal Account Tab -->
        <div x-show="activeTab === 'student-portal-account'">
            <section class="p-4 rounded-lg" role="tabpanel" aria-labelledby="student-portal-account-tab">
                <!-- Buttons Container -->
                <div class="flex items-center justify-between mb-4">
                    <x-email-all-button callback="handleEmailAll" button-text="Email all" />
                    <x-edit-email-template-button modal-id="sp-account-modal"
                        modal-title="Student Portal Account Email Template" />
                </div>
                <!-- Pending Credentials Table -->
                <livewire:list-pending-email-student-portal />
            </section>
        </div>
        <!-- PLM Email Tab -->
        <div x-show="activeTab === 'plm-email'">
            <section class="p-4 rounded-lg" role="tabpanel" aria-labelledby="plm-email-tab">
                <!-- Buttons Container -->
                <div class="flex items-center justify-between mb-4">
                    <x-email-all-button callback="handleEmailAll" button-text="Email all" />
                    <x-edit-email-template-button modal-id="plm-email-modal"
                        modal-title="PLM Email Credentials Email Template" />
                </div>
                <!-- Pending Credentials Table -->
                <livewire:list-pending-email-p-l-m-email />
            </section>
        </div>
    </div>
</x-app-layout>

@vite('resources/js/credential-generation-dashboard.js')