Select2 Selected item becomes empty on re-select - html

Question

I have select element inside a modal form configured as single selection, I load my data using ajax call. The problem is when I select item1 then hide the modal, when I show the modal again and select item1 again the select field text becomes empty.
First selection:
Second selection:
I tried logging the value and selected object changed.
First selection logged value:
Second selection logged value:
So basically the selected object is changed on the second selection. I tried re-initializing my select2 but still the problem persist. I also checked the response json on my second selection and the content is correct.
my html code:
<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<form class="w-100" id="my-form">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title" >Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="d-flex w-100">
<div class="w-50 d-flex flex-column pr-1">
<div class="d-flex">
<select id="my-select" class="form-control" data-style="select-with-transition">
<option></option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
my javascript code:
$('#my-modal').on('shown.bs.modal', function () {
$('#my-select').select2({
placeholder: "select item",
allowClear: true,
dropdownParent: $('#my-modal'),
ajax: {
url: "/my-url",
dataType: "json",
delay: 250,
data: function(param) {
return {
search: param.term
}
},
processResults: function(data) {
return {
results: data.items
};
},
cache: true
},
escapeMarkup: function(e) {
return e
},
minimumInputLength: 1,
templateResult: function(repo) {
if (repo.loading) {
return repo.text;
}
return `<option value="${repo.id}">${repo.name}</option>`
},
templateSelection: function(item) {
console.log(item);
return item.name
}
});
});