Antlers pagination {{links}} not showing

[enddevNZ]

Antlers {{links}} is not showing up the pagination links. I can manually change the page in the url and it works.

I am going around in circles, as i can remove the $this->withPagination as in the documentation and then use {{products->links()}} to show the pagination controls, but it then will not list the products correctly.

Any help appreciated, versions below

"jonassiewertsen/statamic-livewire": "^3.2", "statamic/cms": "^5.0"

below is livewire component

<?php

namespace App\Livewire;

use App\Livewire\Forms\ProductFilter;
use Livewire\Attributes\{Locked, Computed};
use Jonassiewertsen\Livewire\WithPagination;
use Livewire\Component;
use Statamic\Facades\Entry;

class ProductList extends Component
{
    use WithPagination;

    public ProductFilter $filters;

    #[Locked]
    public $category;

    /**
     * Mount the component with the given category and fields.
     *
     * @param string $category
     * @param string $fields
     * @return void
     */
    public function mount($category, $fields)
    {
        // Initialize filters with all products in the given category
        $products = $this->productQuery($category)->get();
        $this->filters->init($products, $fields);
    }

    /**
     * Query products based on the category.
     *
     * @param string $category
     * @return \Statamic\Query\Builder
     */
    #[Computed]
    protected function productQuery($category)
    {
        return Entry::query()
            ->where('collection', 'products')
            ->whereTaxonomy("categories::$category");
    }

    /**
     * Apply filters to the product query.
     *
     * @param \Statamic\Query\Builder $query
     * @return \Statamic\Query\Builder
     */
    protected function applyFilters($query)
    {
        return $this->filters->filterProducts($query);
    }

    /**
     * Sort the product query by order.
     *
     * @param \Statamic\Query\Builder $query
     * @return \Statamic\Query\Builder
     */
    protected function sortProducts($query)
    {
        return $query->orderBy('order', 'asc');
    }

    /**
     * Render the product list view.
     *
     * @return \Illuminate\View\View
     */
    public function render()
    {
        // Build the query and apply filters and sorting
        $query = $this->productQuery($this->category);
        $query = $this->applyFilters($query);
        $query = $this->sortProducts($query);

        // Paginate the results
        $products = $query->paginate(10);

        $data = $this->WithPagination("products", $products);

        return view('categories.livewire-product-list', ["products" => $data["products"]]);
    }
}

Below is my antlers component

<section class="py-8">
    <div class="container mx-auto">
        <div class="lg:flex px-2">
            <!-- Filters Section -->

            {{ foreach :array="filters:filters" }}
                {{ if value | length }}
                    <div class="w-full lg:w-1/4 prose lg:pl-4 first:pl-0">
                        <div class="collapse collapse-arrow bg-base border border-base-300 mb-2">
                            <input type="checkbox" id="filter-{{ key }}" />
                            <label class="collapse-title text-xl font-medium" for="filter-{{ key }}">
                                {{ key | deslugify | ucfirst }}
                            </label>
                            <div class="collapse-content">
                                {{ value }}
                                    <div class="form-control" wire:key="{{ index }}">
                                        <label class="label cursor-pointer">
                                            <span class="label-text">{{ title }}</span>
                                            <input type="checkbox" value="{{ slug }}" class="checkbox"
                                                wire:model.live="filters.selectedFilters.{{ key }}" />
                                        </label>
                                    </div>
                                {{ /value }}
                            </div>
                        </div>
                    </div>
                {{ /if }}
            {{ /foreach }}
        </div>

        <!-- Product List Section -->
        <div class="lg:flex mt-8 relative">
            <div wire:loading.class="opacity-25" class="w-full lg:flex lg:flex-wrap transition-opacity duration-300">
                {{ products }}
                    {{ scope:product }}
                        {{ if !no_results }}
                            <div class="px-4 last:pb-0 pb-4 w-full md:w-1/3 lg:w-1/4">
                                {{ partial:partials/grid_product_card wire:key="{{index}}" :product="product" }}
                            </div>
                        {{ else }}
                            <p>No products found.</p>
                        {{ /if }}
                    {{ /scope:product }}
                {{ /products }}
                {{ links }}
            </div>
        </div>
    </div>
</section>

[enddevNZ]

Realized my stupidity, sorry in the render i was passing [products => $data], should of just passed $data and it works as shown.