Livewire Pagination is not responding - laravel

Question

Why there is so much problems with this pagination from livewire? i have been see many topics of this.. and srsly i don't get it.. what wrong im doing? https://i.imgur.com/PENGFjf.gifv <- problem
if i go manualy and i write "?page=2" in url adress it is working, but i don't have any actions inside, clicking in pagination buttons
| "laravel/framework": "^8.54",
| "laravel/jetstream": "^2.3",
| "laravel/sanctum": "^2.6",
| "laravel/tinker": "^2.5",
| "livewire/livewire": "^2.5"
<?php
namespace App\Http\Livewire;
use App\Models\Product;
use Livewire\Component;
use Livewire\WithPagination;
class ShopComponent extends Component
{
use WithPagination;
public function render()
{
return view('livewire.shop-component', ['products' => Product::paginate(9)])->layout('layouts.base');
}
public function paginationView()
{
return 'livewire.custom-pagination';
}
}
Custom pagination is copy from vendor - bootstrap pagination
<div>
#if ($paginator->hasPages())
<nav class="pagination justify-content-center">
<ul class="pagination mt-30 mb-30">
{{-- Previous Page Link --}}
#if ($paginator->onFirstPage())
<li class="page-item disabled" aria-disabled="true" aria-label="#lang('pagination.previous')">
<span class="page-link" aria-hidden="true">‹</span>
</li>
#else
<li class="page-item">
<button type="button" dusk="previousPage" class="page-link" wire:click="previousPage" wire:loading.attr="disabled" rel="prev" aria-label="#lang('pagination.previous')">‹</button>
</li>
#endif
{{-- Pagination Elements --}}
#foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
#if (is_string($element))
<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
#endif
{{-- Array Of Links --}}
#if (is_array($element))
#foreach ($element as $page => $url)
#if ($page == $paginator->currentPage())
<li class="page-item active" wire:key="paginator-page-{{ $page }}" aria-current="page"><span class="page-link">{{ $page }}</span></li>
#else
<li class="page-item" wire:key="paginator-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }})">{{ $page }}</button></li>
#endif
#endforeach
#endif
#endforeach
{{-- Next Page Link --}}
#if ($paginator->hasMorePages())
<li class="page-item">
<button type="button" dusk="nextPage" class="page-link" wire:click="nextPage" wire:loading.attr="disabled" rel="next" aria-label="#lang('pagination.next')">›</button>
</li>
#else
<li class="page-item disabled" aria-disabled="true" aria-label="#lang('pagination.next')">
<span class="page-link" aria-hidden="true">›</span>
</li>
#endif
</ul>
</nav>
#endif
</div>
shop-component
https://i.imgur.com/bob483q.png
<div>
#foreach ($products as $product)
<div class="col-sm-6 col-lg-4 mb-30">
<div class="card product-card">
<div class="card-body">
<div class="product-thumbnail position-relative">
<span class="badge badge-danger top-right">New</span>
<a href="single-product.html">
<img class="first-img" src="{{ asset('assets/img/product/1.png') }}" alt="thumbnail" />
</a>
<!-- product links -->
<ul class="actions d-flex justify-content-center">
<li>
<a class="action" href="wishlist.html">
<span data-toggle="tooltip" data-placement="bottom" title="add to wishlist" class="icon-heart">
</span>
</a>
</li>
<li>
<a class="action" href="#" data-toggle="modal" data-target="#compare">
<span data-toggle="tooltip" data-placement="bottom" title="Add to compare" class="icon-shuffle"></span>
</a>
</li>
<li>
<a class="action" href="#" data-toggle="modal" data-target="#quick-view" >
<span data-toggle="tooltip" data-placement="bottom" title="Quick view" class="icon-magnifier"></span>
</a>
</li>
</ul>
</div>
<div class="product-desc py-0 px-0">
<h3 class="title">
{{ $product->name }}
</h3>
<div class="star-rating">
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star de-selected"></span>
</div>
<div class="d-flex align-items-center justify-content-between" >
<span class="product-price">{{ $product->regular_price }}</span>
<button class="pro-btn" data-toggle="modal" data-target="#add-to-cart" >
<i class="icon-basket"></i>
</button>
</div>
</div>
</div>
</div>
</div>
#endforeach
{{-- Paginacja produktów --}}
{{ $products->links() }}
</div>

Answer 1

php artisan livewire:publish --config
php artisan livewire:publish --assets
second , make sure to add this lines in the main template.
<head>
#livewireStyles
</head>
<body>
{{ $slot }}
#livewireScripts
</body>