Subsequent pagination pages does not load automatically

Config: Lavavel 9.19 with Jetstream and Livewire installed. I have an issue where the pagination pages do not load automatically. I need to either f5 or press enter to get the page to load. The correct url shows in the browser eg.

http://127.0.0.1:8000/admin/dashboard/directory-categories?page=4

I have checked and rechecked but cannot seem to find the issue. Browser cache has been cleared and I have tried both on Chrome and Firefox. So it seems to be a Livewire issue I think. I have @LivewireStyles and @livewireScripts on the view page.

<?php
namespace App\Http\Livewire\Admin;
use App\Models\DirectoryCategory;
use Livewire\Component;
use Livewire\WithPagination;

class AdminDashboardDirectoryCategoryComponent extends Component
{
    use WithPagination;
    public function render()
    {
        $dcategories = DirectoryCategory::paginate(6);
        return view('livewire.admin.admin-dashboard-directory-category-component',['dcategories'=>$dcategories])->layout('backend_layout.AdminDashboardIndex');
    }
}

<div>
@livewireStyles
  
    <style>
        nav svg {
        height: 20px;
        }

        nav .hidden {
        display: block !important;
        }

    </style>

    <div class="section-title-01 honmob">
        <div class="bg_parallax image_02_parallax"></div>
        <div class="opacy_bg_02">
            <div class="container">
                <h1>Directory Categories</h1>
                <div class="crumbs">
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li>/</li>
                        <li>Directory Categories</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
        <section class="content-central">
            <div class="content_info">
                <div class="paddings-mini">
                    <div class="container">
                        <div class="row portfolioContainer">
                            <div class="col-md-12 profile1">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Image</th>
                                            <th>Group</th>
                                            <th>Name</th>
                                            <th>Slug</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                    @foreach($dcategories as $dcategory)
                                        <tr>
                                            <td>{{$dcategory->id}}</td>
                                            <td><img src="{{asset('frontend/assets/images/dir_categories')}}/{{$dcategory->image}}" width="60" /></td>
                                            <td>{{$dcategory->group}}</td>
                                            <td>{{$dcategory->name}}</td>
                                            <td>{{$dcategory->slug}}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>

                                </table>
                                {{$dcategories->links()}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @livewireScripts
</div>

Route in web.php is shown below:

Route::get('/admin/dashboard/directory-categories',App\Http\Livewire\Admin\AdminDashboardDirectoryCategoryComponent::class)->name('admin.directory_categories');

link shown below

<a href="{{route('admin.directory_categories')}}" class="nav-link px-3 mt-0 active">
        <span class="me-2">
            <i class="bi bi-speedometer2"></i>
        </span>
        <span>
            List Categories
        </span>
     </a>
</li>