select2 not loading in bootstrap5 remote modal the first time. second time works - yii2

Question

I recently moved from bootstrap3 to bootstrap5. Select2 in modal stopped working. I know there has been known issue in this which was resolved using
$.fn.modal.Constructor.prototype.enforceFocus = function() {}
Or using dropdownParent option for the select 2 to bind to the modal. But this didn't work for me.
So I am loading content (including modal) via ajax and populate Select2 inside it. When I click the link first time, select2 is invisible altogether. I close the modal and click the link again, it works fine the second time. I tried dame removing tabindex as well as tabindex='false'.
Clicking first time:
closed the modal and click the second time:
What am I missing here.
my Ajax code is :
HTML: <a href='url-to-controller-returning view' class='modal-remote'>Add</a>
$(document).on('click', '.modal-remote', function (e) {
e.preventDefault();
var $modalRemote = $('#modal-remote'),
url = $(this).attr('href');
$.ajax({
url: url,
beforeSend: function (data) {
if (!$modalRemote.length) $modalRemote = $('<div class="modal fade" id="modal-remote" aria-hidden="true"><div class="modal-dialog ' + modalClass + '"><div class="modal-content"></div></div></div>');
$modalRemote.find('.modal-content').html('<div class="modal-header"><h5 id="remoteModalLabel">Loading...</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="modal-remote-indicator"></div></div>');
$modalRemote.modal('show');
},
success: function (data) {
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
var $dom = $(document.createElement('html'));
$dom[0].innerHTML = data;
$dom.find('link').remove();
$modalRemote.find('.modal-header > h5').html($dom.find('title').text());
$modalRemote.find('.modal-body').html($dom.html());
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$modalRemote.find('.modal-header > h5').html('Error');
$modalRemote.find('.modal-body').html(XMLHttpRequest.responseText);
}
});
});