Laravel 10.9.0 update using ajax error when submiting data

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 :)