I'm trying to update data by opening modal bootstrap, and got an error when PUT data from AJAX to route

this is the error 'localhost:8000/nilaiUpdates/1 419 (unknown status)
I tired to change so many method and it doesn't work for me.
so here's my route :

Route::put('/nilaiUpdates/{id}', [PesertaController::class, 'update']);
My Blade file nilaiPeserta.blade.php :

<div id="editPesertaModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                 <form id="update-user-form"> 
                    <div class="modal-header">
                        <h4 class="modal-title">Edit Peserta</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Name</label>
                            <input  id="id" name="id" type="text" class="form-control" readonly >
                            <input  id="nama" name="nama"  type="text" class="form-control" required >
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input  id="email" name="email" type="email" class="form-control" required >
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                        <input type="submit" class="btn btn-info update-btn" value="Save">
                    </div>
                </form>
            </div>
        </div>
    </div>

My AJAX :

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

        $('.update-btn').on('click', function (e) {
            e.preventDefault();

            let id = $('#id').val();

            var data = {
                'nama' : $('#nama').val(),
                'email' : $('#email').val(),
            }

            $.ajax({
                type: "PUT",
                url: "/nilaiUpdates/" + id,
                data: data,
                dataType : 'json',
                success: function (response) {
                    console.log(response);
                },
                error: function (xhr) {
                    console.log(xhr.responseText);
                }
            });
        });

My Controller :
PesertaController.php
public function update(Request $request, $id)
{
    $this->validate($request,[
       'nama' => 'required',
       'email' => 'required',
    ]);

    $peserta = Peserta::find($id);

    $peserta->nama = $request->nama;
    $peserta->email = $request->email;
    $peserta->update();

    return response()->json([
        'status'=>200,
        'message' => 'Peserta Updated Successfuly',
    ]);
}

My Model :
class Peserta extends Model
{
    use HasFactory;

    protected $table = "peserta";
    protected $fillable =
    [
        'nama'
        ,'email'
    ];
}

Help me please :)