jQuery.Deferred exception: Cannot read properties of undefined (reading 'length') -> Laravel 8 Boilerplate + Bootstrap

I am using Laravel Boilerplate from Sebastien Heyd and trying to get Select2 options via Ajax. When I click on the select element after the page loads, I get the error:

jQuery.Deferred exception: Cannot read properties of undefined (reading 'length') TypeError: Cannot read properties of undefined (reading 'length').

My code is like this.

1. Blade template.

       <div class="col-lg-2">
       <div class="form-group">
               <x-boilerplate::select2 name="frm_Daily_Heading" id="frm_Daily_Headings" label="Heading" :ajax="route('boilerplate.getHeadings')" :allowClear="true" placeholder="-">
               </x-boilerplate::select2>
       </div>
   </div>  
   

@endsection
@include('boilerplate::load.select2')
@include('boilerplate::load.datepicker')
@push('js')

    <script>    
    $( document ).ready(function() {
        $( "#frm_Daily_Headings" ).select2({
            ajax: { 
                url: "{{route('boilerplate.getHeadings')}}",
                type: "post",
                dataType: 'json',
                delay: 2500,
                data: function (params) {
                    if(params.term === undefined){return} else{
                    return {
                        q: params.term, // search term
                        "_token": "{{ csrf_token() }}",
                    };}
                },
                processResults: function (response) {
                    if(results === undefined) {return} else {
                    return {
                        results: data.items
                        // id: params.term,
                        // text: params.term
                        // newOption: true
                    };}
                },
                cache: true
            }
        });
    });
    $('.datepicker').datetimepicker();
</script>

    @endpush
```

2. My Controller for handling Ajax request for the Select2.

   namespace App\Http\Controllers;
   
   use Illuminate\Http\Request;
   use App\Models\heading;
   
   class HeadingsController extends Controller
   {
       public function index() {
           return view('daily');
       }
       public function getHeadings(Request $request)
       {
           $input = $request->all();
           if (!empty($input['query'])) {
               $data = heading::select(["id", "heading"])
               ->where("heading", "LIKE", "%{$input['query']}%")
               ->get();
           }
           else
           {
               $data = heading::select(["id", "heading"])->get();
           }
           $headings = [];
           $returnThis=[];
           if (count($data) > 0)
           {
               foreach ($data as $heading)
               {
                   $headings[] = array(
                       "id" => $heading->id,
                       "text" => $heading->heading,
                   );
                   $returnThis=['results',$headings];
               }
           }
           return response()->json($returnThis);
       }
   }
   

3. My Model

   namespace App\Models;
   
   use Illuminate\Database\Eloquent\Factories\HasFactory;
   use Illuminate\Database\Eloquent\Model;
   use App\Http\Controllers\HeadingsController;
   
   class heading extends Model
   {
       use HasFactory;
       protected $fillable=['id','heading'];
   }
   

When I click on the dropdown, I get the above error. However, using the dev tools in chrome, under the Network section, I can see the values being loaded.

The Ajax response corresponds to the requirements in Select2 documentation.

My jquery is being loaded before bootstrap.min.js.

All scripts and Laravel are the up to date versions.

Any help would be greatly appreciated.

Cheers.