JSON data displayed but table not drawn (using Datables - server side processing)

I am using Yajra's DataTables server side processing. I can see the JSON data but the table is not being populated.

I managed to get DataTables working with client side processing, but as I will eventually have > 50,000 rows of data, I decided to try and implement server side processing by downloading Yajra's DataTables for Laravel 5.8.

When I call my route, I see the data in a JSON format, but I am not seeing the table at all. It says "draw: 0", so I guess there is an issue with drawing the table?

I have tried various solutions mentioned on stack overflow and the official DataTables website, however none seem to work for me. E.g.
- DataTables json is not processed (in Laravel)
- jQuery Datatables - Table not populated for Ajax response
- https://datatables.net/forums/discussion/45444/populate-table-body-with-ajax

The JSON data that I see when I call my route is as follows:

{
  "draw": 0,
  "recordsTotal": 3,
  "recordsFiltered": 3,
  "data": [

    {
      "id": "1",
      "customerNr": "98764",
      "orderNr": "23478",
      "pallet_id": "66788",
      "status_id": "2",
      "created_by": "Sara",
      "created_at": "04 Jul 2019",
      "updated_at": "2019-07-09 07:23:20"
    },
    {
      "id": "2",
      "customerNr": "99999",
      "orderNr": "22222",
      "pallet_id": "22335",
      "status_id": "1",
      "created_by": "Sophie",
      "created_at": "04 Jul 2019",
      "updated_at": "2019-07-04 08:26:28"
    },
    {
      "id": "3",
      "customerNr": "54657",
      "orderNr": "89856",
      "pallet_id": "11228",
      "status_id": "1",
      "created_by": "Markus",
      "created_at": "08 Jul 2019",
      "updated_at": "2019-07-08 06:59:42"
    },

  ],
  "input": []
}

Here are the relevant files from my Laravel project:

web.php:

Route::get('returned-shipment', ['uses'=>'ReturnedShipmentController@index', 'as'=>'returned-shipment.index']);

ReturnedShipmentController:

public function index(
{
   return DataTables::of(ReturnedShipment::all())->make();
}

index.blade.php:

<div class="row">
    <div id="tbl" class="col-sm-12">
        <table id="overview" class="cell-border display">

            <thead class="tbl-top">
            <tr>
                <th>Retourennummer</th>
                <th>Auftragsnummer</th>
                <th>Datum</th>
                <th>Zustand</th>
            </tr>
            </thead>

            <tfoot class="tbl-bottom">
            <tr>
                <th>Retourennummer</th>
                <th>Auftragsnummer</th>
                <th>Datum</th>
                <th>Zustand</th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

<script>
    $(document).ready(function () {
        var startingStatus = 'angelegt';
        var table = $('#overview').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "{{ route('returned-shipment.index') }}",
            "columns": [
                {data: 'id'},
                {data: 'orderNr'},
                {data: 'created_at'},
                {data: 'status_id'}
            ],
            "search": {
                "search": "angelegt"
            },
            "dom": "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-6'i><'col-sm-6'p>>",
            "paging": true,
            "info": true,
            "searching": true,
            "autoWidth": true,
            "language": {
                "paginate": {
                    "previous": "Vorherige Seite",
                    "next": "Nächste Seite"
                },
                "search": "Suche:",
                "info": "Zeige _START_ - _END_ von insgesamt _TOTAL_ Einträgen",
                "lengthMenu": 'Einträge pro Seite' + '<br>' +
                    '<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">' +
                    '<option selected value="10">10</option>' +
                    '<option value="20">20</option>' +
                    '<option value="30">30</option>' +
                    '<option value="40">40</option>' +
                    '<option value="50">50</option>' +
                    '<option value="-1">Alle</option>' +
                    '</select>'
            },
            initComplete: function () {
                /**
                 * Drop-down filter is created for the 4th column "status" in the header and populates it with
                 * the different status values
                 */
                this.api().columns([3]).every(function () {
                    var column = this;
                    var select = $('<select><option value="">alle</option></select>')
                        .appendTo($(column.header()))
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    /**
                     * When clicking on drop-down next to status, the sorting function is not activated
                     */
                    $(select).click(function (e) {
                        e.stopPropagation();
                    });

                    /**
                     * Once an option in the drop-down next to status has been selected, you can read the text in
                     * the drop-down
                     */
                    column.data().unique().sort().each(function (d, j) {
                        if (startingStatus === d) {
                            select.append('<option SELECTED value="' + d + '">' + d + '</option>')
                        } else {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        }
                    });

                    /**
                     * When drop-down is clicked on, search field is cleared. Otherwise search field must be
                     * manually cleared before using the drop-down.
                     */
                    $(select).on('click', function () {
                        table.search(" ").draw();
                    });
                });
            }
        });
    });
</script>

I am expecting to see the table being populated with the data.

If I need to provide any more code or explain something further, please don't hesitate to ask. I am quite new to Laravel and DataTables, so I would greatly appreciate your help.

Thanks in advance! :)