Succeed to get data, but failed to input to modal form bootstrap with AJAX

Question

Using a bootstrap modal with Ajax and i want to update my data. but there an issue the data doesnt show up to the form , i was trying to use console.log() and i got the data but it failed when i was trying to put to modal form bootstrap This is the Jquery Code

$(".update-category").click(function (event) {
  const id = $(this).data("id");
  const url = `/Category/GetId?id=${id}`;
  $(".modal-update-category").modal('show');

  $(".modal-update-category").on("shown.bs.modal", function (e) {
    $.ajax({
      method: 'GET',
      url: url,
      contentType: 'application/json',
      success: function (response) {
        $("#categoryName").val(response.categoryName);
        $("#categoryDesc").val(response.description);
      },
      error: function (xhr, status, error) {
        console.log(`Error: ${error}`);
      }
    });
  });
});

and this is the modal..

<div class="modal fade modal-update-category" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div id="liveAlertPlaceholder"></div>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Insert Category</h5>
            </div>
            <form>
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="col text-center">
                            <label class="col col-form-label fs-6">Category Name</label>
                        </div>
                        <div class="col modal-input ">
                            <input type="text" class="form-control" id="categoryName">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col text-center">
                            <label class="col col-form-label fs-6">Description</label>
                        </div>
                        <div class="col modal-input">
                            <textarea type="text" class="form-control" id="categoryDesc" style="height: 100px"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary text-light btn-category-submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

i expect the form can be filled the data