table.rows().select() not working after I destroy and re create the table

$(function () {
loadDatatable("intervention");
loadDatatable("monthly");
loadDatatable("semi_annually");
});

    function filterMethod(type) {
        const form = document.querySelector('#filterForm' + type);
        const data = Object.fromEntries(new FormData(form).entries());
        $(".datatable-" + type + "Kpi").DataTable().destroy();
        loadDatatable(type, data)
    }

    function loadDatatable(type, formData = null) {
        @if(auth()->user()->isSupplier)
            columnDefs = [
                {
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0,
                    defaultContent:""
                }
            ];
            columnList = [
                {
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                },
            ];
            selectDefs = {
                style: 'multi',
                selector: 'td:first-child'
            };
        @else
            columnDefs = []
            columnList = [];
            selectDefs = false;
        @endif
        columnList.push({orderable: false, data: 'full_name', name: 'full_name'},
            {orderable: false, data: 'type', name: 'type'},
            {orderable: false, data: 'contract_description', name: 'contract_description'},
            {orderable: false, data: 'conditional_column', name: 'conditional_column'},
            {orderable: false, data: 'under_threshold', name: 'under_threshold'},
            {orderable: false, data: 'value', name: 'value'},
            {orderable: false, data: 'status', name: 'status'});
        @if(auth()->user()->isSupplier)
            columnList.push(
                {
                    orderable: false,
                    data: 'action',
                    name: 'action'
                }
            )
        @endif
        var table = $('.datatable-' + type + 'Kpi').DataTable({
            processing: true,
            serverSide: true,
            pageLength: 25,
            ajax: {
                url: type === "intervention" ? "{{ route('kpi.getIntervention') }}" : (type === "monthly" ? "{{ route('kpi.getMonthly') }}" : (type === "semi_annually" ? "{{ route('kpi.getSemiAnnually') }}" : "")),
                data: {formData: formData}
            },
            columnDefs: columnDefs,
            select: selectDefs,
            buttons: dtButtons,
            destroy: true,
            columns: columnList
        });
        table.on("click", "th.select-checkbox", function () {
            if ($("th.select-checkbox").hasClass("selected")) {
                table.rows().deselect();
                $("th.select-checkbox").removeClass("selected");
            } else {
                table.rows().select();
                $("th.select-checkbox").addClass("selected");
            }
        }).on("select deselect", function () {
            ("Some selection or deselection going on")
            if (table.rows({
                selected: true
            }).count() !== table.rows().count()) {
                $('.checkboxhide').show();
                $("th.select-checkbox").removeClass("selected");
            } else {
                $('.checkboxhide').hide();
                $("th.select-checkbox").addClass("selected");
            }
        });
        table.on( 'page.dt', function () {
            $('.checkboxhide').show();
            $("th.select-checkbox").removeClass("selected");
        } );
    };

So here on load the select all checkbox is working and selecting but when it comes from filter function (destroy and re create)
than the table.rows().select() not working