Select2 Dynamic Select AJAX - ajax

Question

I have the following AJAX script:
$.ajax({
type:'POST',
url: '/carrier/manifests/storeManifestShipments',
data: {
proNumber: proNumber,
bolNumber: bolNumber,
poNumber: poNumber,
SpecInst1: SpecInst1,
SpecInst2: SpecInst2,
SpecInst3: SpecInst3,
billTo: billTo,
originName: originName,
originAddress1: originAddress1,
originAddress2: originAddress2,
originCity: originCity,
originState: originState,
originZip: originZip,
consigneeName: consigneeName,
consigneeAddress1: consigneeAddress1,
consigneeAddress2: consigneeAddress2,
consigneeCity: consigneeCity,
consigneeState: consigneeState,
consigneeZip: consigneeZip,
shipmentProjectedDate: shipmentProjectedDate,
shipmentWeight: shipmentWeight,
shipmentPieceCount: shipmentPieceCount,
createdBy: '{{Auth::user()->id}}',
_token: $('input[name=_token]').val(),
dataType: 'json',
},
success: function(response) {
if(response !== undefined) {
$('#createShipment').modal('hide');
var shipmentSelect = $('.shipmentSelect');
var option = new Option(response.pro_number, response.id, true, true);
shipmentSelect.append(option).trigger('change');
// manually trigger the `select2:select` event
shipmentSelect.trigger({
type: 'select2:select',
params: {
data: response
}
});
console.log('success');
}else{
console.log('failed');
console.log(response);
}
},
error: function (jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 500) {
toastr.error('Validation error - Make sure all required fields are filled!', 'Error Alert', {timeOut: 5000});
console.log('Internal error: ' + jqXHR.responseText);
} else if (jqXHR.status == 422) {
toastr.error('Validation error - Make sure all required fields are filled!', 'Error Alert', {timeOut: 5000});
console.log('Internal error: ' + jqXHR.responseText);
} else {
console.log('Unexpected error.');
}
}
});
As you can see, within the success event I lay out something similar to how the example suggests it here: https://select2.org/programmatic-control/add-select-clear-items.
The problem is that it doesn't want to "select" the item from the select2 that is referenced (.shipmentSelect). It doesn't throw an error either, but nothing really happens. It does print the success message in the console.
The response is formatted as such:
id: 1
pro_number: 1234
name: person1
.....
So I'm curious if there is a different way of formatting it, but I believe the issue comes from the following lines:
shipmentSelect.trigger({
type: 'select2:select',
params: {
data: response
}
});
I believe I need to provide maybe something else besides the general response?
Thanks