response.links are not display after use filters

I have blade.php with table. I have a menu that allows you to choose how many items to display on the page. I also have a page number selection menu ( {{ $ingredients->links() }} ). Unfortunately, this only works well when the number of elements per page is the default. When I change the number of items, the page number selection menu does not update. When I use filter menu (for example to filtr categories) it not works too.

<div class="pagination-menu">
                            <div class="flex justify-evenly py-4 space-x-2 rtl:space-x-reverse">
                                <a class="inline-flex w-20 items-center rounded-lg bg-blue-700 px-5 text-center text-sm font-medium text-white items-actual-count py-2.5 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                                   data-dropdown-toggle="dropdown" role="button" aria-haspopup="true"
                                   aria-expanded="false">10</a>
                                <!-- Dropdown menu -->
                                <div id="dropdown"
                                     class="z-10 hidden w-44 rounded-lg bg-white shadow items-count divide-y divide-gray-100 dark:bg-gray-700"
                                     aria-labelledby="navbarDropdown" x-placement="bottom-end"
                                     style="will-change: transform; position: absolute; transform: translate3d(120px, 48px, 0px); top: 0px; left: 0px;">
                                    <a href="#"
                                       class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">10</a>
                                    <a href="#"
                                       class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">20</a>
                                    <a href="#"
                                       class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">50</a>
                                    <a href="#"
                                       class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">100</a>
                                </div>
                                <div class="pagination-links">
                                    {{ $ingredients->links() }}
                                </div>
                            </div>
                        </div>

In my index.js I have function which is use after filtering or change value of elements per page.

function getItems(paginate) {
        const form = $('form#sidebar-filter').serialize();
        $.ajax({
            method: "GET",
            url: "ingredients/",
            data: form + "&" + $.param({paginate: paginate}),
            dataType: 'json'
        })
            .done(function (response) {
                $('tbody#ingredients-list').empty();
                $.each(response.data, function (index, ingredient) {
                    const html = '<tr class="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600">' +
                        '                   <th scope="row"' +
                        '                       class="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white">' +
                        ingredient.name +
                        '                   </th>' +
                        '                   <td class="px-6 py-4">' +
                        ingredient.category +
                        '                   </td>' +
                        '                   <td class="px-6 py-4">' +
                        ingredient.unit +
                        '                   </td>' +
                        '                   <td class="px-6 py-4">' +
                        ingredient.calories +
                        '                   </td>' +
                        '                   <td class="px-6 py-4">' +
                        '                       <a href="' + editUrl + ingredient.id + '"' +
                        '                            class="font-medium text-blue-600 hover:underline dark:text-blue-500">Edit</a>' +
                        '                       <button data-id="' + ingredient.id + '"' +
                        '                           class="ml-2 font-medium text-red-600 delete hover:underline dark:text-blue-500">Delete</button>' +
                        '                   </td>' +
                        '                 </tr>';
                    $('tbody#ingredients-list').append(html);
                });
                console.log(response.links);
                $('.pagination-links').empty();
                $('.pagination-links').append(response.links);
            });
    }

After use filters, console.log show good results, but menu to selecting page is disappear.