I fetch data from Spring backend and populate into JSP data table. Because it will be huge amount of data, I want to enable server side processing to make server handle the pagination. But I keep hitting the error after setting serverSide to true: DataTables warning: table id=list-table – Invalid JSON response.

This is part of my JSP code:

function initTable() {
        listTable = LIST_TABLE.DataTable({
            "aaSorting": [[3, 'desc']],
            "aLengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]],
            "iDisplayLength": 20,
            "processing": true,
            "serverSide": true,
            "bAutoWidth": false,
            "jQueryUI": true,
            "paging": true,
            "scrollCollapse": true,
            "info": true,
            "sDom": '<"clearfix"<"col-sm-6"li><"col-sm-6 padding-0"f>>rt<"clear"p>',
            "columnDefs": [
                {className: "text-center", targets: "_all"},
                {orderable: false, targets: [13]},
            ],
        });

        LIST_TABLE
            .off()
            .on('click', '.view-button', function (event) {
                const isViewButton = $(event.target).hasClass('view-button');

                const array = generateModalData();

                if (isViewButton) {
                    showModal(array);
                }
            });
    }

function getList() {
        listTable.clear().draw();

        const name = $('#name').val();
        const dateFrom = formatDateToMMDDYYYY($('#showDateFrom').val(), '/');
        const dateTo = formatDateToMMDDYYYY($('#showDateTo').val(), '/');
        const inquiryType = $inquiryTypeSelect.val();
        const category = $categorySelect.val();
        const status = $statusSelect.val();
        const draw = 1;
        const start = 0;
        const length = 20;

        const searchModel = {
            name: name,
            dateFrom: dateFrom,
            dateTo: dateTo,
            inquiryType: inquiryType,
            category: category,
            status: status,
            draw: draw,
            start: start,
            length: length
        }

        $.ajax({
            method: 'POST',
            url: '<c:url value="/rest/group-count"/>',
            data: JSON.stringify(searchModel),
            contentType: 'application/json',
            success: function (groupCountModels) {
               
                for (let i = 0; i < groupCountModels.length; i++) {
                    const model = groupCountModels[i];
                    const tRow = [];
                    const createdDate = model.createdDate ? moment(model.createdDate).format('DD-MM-yyyy h:mm:ss a') : null;
                    const lastUpdatedDate = model.lastUpdatedDate ? moment(model.lastUpdatedDate).format('DD-MM-yyyy h:mm:ss a') : null;
                    tRow.push(model.inquiryId ? model.inquiryId : "-");
                    tRow.push(model.inquiryType ? model.inquiryType : "-");
                    tRow.push(model.category ? model.category : "-");
                    tRow.push(createdDate ? createdDate : "-");
                    tRow.push(model.name ? escapeHtml(model.name) : "-");
                    tRow.push(model.companyName ? escapeHtml(model.companyName) : "-");
                    tRow.push(model.email ? escapeHtml(model.email) : "-");
                    tRow.push(model.message ? escapeHtml(model.message) : "-");
                    tRow.push(model.phone ? escapeHtml(model.phone) : "-");
                    tRow.push(model.status ? model.status : "-");
                    tRow.push(model.handledBy ? model.handledBy : "-");
                    tRow.push(lastUpdatedDate ? lastUpdatedDate : "-");
                    tRow.push(model.remarks ? escapeHtml(model.remarks) : "-");

                    const actionHtml = generateActionHtml(model);
                    tRow.push(actionHtml);

                    listTable.row.add(tRow).node().id = model.inquiryId;
                }
                $.fn.dataTable.moment('DD-MM-yyyy h:mm:ss a');
                listTable.draw();
            },
            error: function () {
                alert("There's an error when getting group count.");
            }
        })
    }

$(document).ready(function () {
        initTable();
        getList();   
    }

This is my backend code:

public ResponseEntity<Map<String, Object>> getList(@RequestBody SearchCriteria searchCriteria) {

        Integer draw = searchCriteria.getDraw();
        Integer start = searchCriteria.getStart();
        Integer length = searchCriteria.getLength();

        Integer pageNumber = start/length;

        Pageable pageable = new PageRequest(pageNumber, length);
        Page<DTO> page = service.getList(searchCriteria, pageable);

        Map<String, Object> response = new HashMap<>();
        response.put("draw", searchCriteria.getDraw());
        response.put("recordsTotal", page.getTotalElements());
        response.put("recordsFiltered", page.getTotalElements());
        response.put("data", page.getContent());

        return ResponseEntity.ok(response);
    }

I tried to print out the response in console and it looks good when I set serverSide to false:
JSON Response

Based on my understanding the expected response structure should be in JSON as in the image above, why it still return error Invalid JSON response, correct me if I am wrong