Uncaught TypeError: Cannot convert undefined or null to object while using FullCalendar in Laravel

MyReservations.blade.php

        <div class="modal-body">
            <!-- Room -->
            <select class="form-control" aria-label="Default select example"  id="room_id" >
                <option selected>Select Room</option>
                @foreach($room as $items)
                    <option value="{{$items->id}}">{{$items->id}}</option>
                @endforeach

            </select>
            <br>
            <!--  Title -->


            <div class="input-group">
                <span class="input-group-text"> Title : </span>
                <input class="form-control" aria-label="Title"  id="title"></input>

            </div>
            <br>
            <!-- Objectif -->
            <div class="input-group">
                <span class="input-group-text">Objectif :</span>
                <textarea class="form-control" aria-label="Objectif"  id="objectif"></textarea>
            </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="submit" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

<script>

    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var events = @json($events);
       $('#calendar').fullCalendar({
            header:{
                left:'prev,next today',
                center:'title',
                right:'month, agendaWeek, agendaDay'
            },
            events: events,
            selectable:true,
            selectHelper:true,

            select: function(start, end, allDays) {
                    $('#ResModal').modal('toggle');
                    $('#submit').click(function () {
                        var title =$("#title").val();
                        var objectif =$("#objectif").val();
                        var room_id =$("#room_id").val();
                        var start = moment(start).format('YYYY-MM-DD');
                        var end = moment(end).format('YYYY-MM-DD');
                //
                //
                    });


                    $.ajax({

                        url:"{{route('MyReservations.store')}}",
                        type:"POST",
                        dataType:'json',
                        data:{title, start, end, room_id, objectif},
                        success:function(response)
                        {
                         consol.log(response)

                     },

                    })


            },

        })
    });

</script>

MyController :

public function  index(){

    $events=array();
    $reservations = reservation::all();
    foreach ($reservations as $reservation){
        $events[] = [
            'title'   =>$reservation->title,
         'start'   =>$reservation->start,
        'end'   =>$reservation->end,
        ];
    }
    $room=room::all();
    return view('/MyReservations', compact('events' ,'room'));

}

public function store(Request $request)
{
   $request->validate([
        'title' =>'required|string',
        'objectif' =>'required|string',
        'room_id' =>'required',
    ]);
    $reservation =reservation::create ([
        'objectif' => $request->objectif,
        'start' => $request->start,
        'end' => $request->end,
        'user_id' => Auth::user()->id,
        'room_id' => $request->room_id,
    ]);
    return response()->json($reservation);

}

and i keep getting this error :

Uncaught TypeError: Cannot convert undefined or null to object

at entries (<anonymous>)

at e (jquery.min.js:4:7727)

at Ab (jquery.min.js:4:7608)

at Ab (jquery.min.js:4:7631)

at Ab (jquery.min.js:4:7631)

at Function.r.param (jquery.min.js:4:7918)

at Function.ajax (jquery.min.js:4:12227)

at Et.e.constructor.select (MyReservations:121:27)

at constructor.publiclyTrigger (fullcalendar.min.js:9:16482)

at Et.e.constructor.publiclyTrigger (fullcalendar.min.js:8:30673)

when I select a date and try to add an event...and i fill in all the info ( till here everything works perfectly) but once i click the 'save changes button ' i see this error in console, and no data is added to ma DB I think the problem is in my store function in MyController or in the $.ajax

NOTE :

• I have imported all the important scripts and links I just couldn't share them here update : the validation is not even working so the store method seems like it is not being called in the first place !! PLEASE HELP ME SOLVE IT