jquery datatables issue on asp.net core 5

Question

i followed all the steps to add jquery table but showing proccessing error

jquery datatables issue on asp.net core 5 i downlaod datatable and added the file and the same code work for another example

DataTables show Ajax error and not loaded the data

conroller code

    public IActionResult IndexGrid()
    {
        return View();
    }
    [HttpPost]

    public async Task<IActionResult> load()
    {
        var students = from s in _context.Students
                       select s;

        return Json(await students.ToListAsync());
    }

view code

<link href="~/lib/datatables/css/dataTables.bootstrap4.css" rel="stylesheet" />
<div class="container">
    <h3 class="text-primary">Customers</h3>
    <hr />

    <table id="Customers" class="table table-striped table-bordered dt-responsive nowrap">
        <thead>
            <tr>
                <th>Id</th>
                <th>LastName</th>
                <th>FirstMidName</th>
                <th>EnrollmentDate</th>
                
            </tr>
        </thead>
    </table>
</div>

@section Scripts
{
    <script src="~/lib/datatables/js/jquery.dataTables.js"></script>
    <script src="~/lib/datatables/js/dataTables.bootstrap4.js"></script>
    <script src="~/js/customersDatatable.js"></script>
}

custom js file

 $(document).ready(function () {
        $('#Customers').dataTable({
            "processing": true,
            "serverSide": true,
            "filter": true,
            "ajax": {
                "url": "/home/load",
                "type": "POST",
                "datatype": "json"
            },
            "columnDefs": [{
                "targets": [0],
                "visible": false,
                "searchable": false
            }],
            "columns": [
                { "data": "Id", "name": "Id", "autowidth": true },
                { "data": "FirstMidName", "name": "FirstMidName", "autowidth": true },
                { "data": "LastName", "name": "LastName", "autowidth": true },
                { "data": "EnrollmentDate", "name": "EnrollmentDate", "autowidth": true },
            
                {
                    "render": function (data, type, row) { return '<a href="#" class="btn btn-danger" onclick=DeleteCustomer("' + row.id + '"); > Delete </a>' },
                    "orderable": false
                },
    
            ]
        });
    });