i have problem with my Bootstrap 5 modal select2. when i opened the modal and i scroll down the form and i click select wich is using select2, the modal auto closed. i will share the code, maybe you all know about the problem, btw i used cork admin template in my project 
<div class="modal fade text-left" id="tambahBuku" role="dialog" aria-labelledby="tambahBuku" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" id="modal-reload">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tambah Buku</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/dashboard/buku" method="POST" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label for="judulBuku">Judul Buku</label>
<input type="text" class="form-control" name="judulBuku" id="judulBuku"
placeholder="Judul Buku">
</div>
<div class="form-group">
<label for="kategoriBukuTambah">Kategori</label>
<select style="margin-bottom: 0%" name="kategori" class="form-control select2"
id="kategoriBukuTambah">
@foreach ($kategoriBuku as $kategori)
<option value="{{$kategori->id}}">{{$kategori->judul_kategori}}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="penerbitBukuTambah">Penerbit</label>
<select class="form-control select2" name="penerbit" id="penerbitBukuTambah">
@foreach ($penerbitBuku as $penerbit)
<option value="{{$penerbit->id}}">{{$penerbit->nama_penerbit}}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="deskripsi">Deskripsi</label>
<textarea class="form-control" name="deskripsi" id="deskripsi" cols="30" rows="5"
placeholder="Deskripsi"></textarea>
</div>
<div class="form-group">
<label for="jumlahSalinan">Jumlah Salinan</label>
<input type="number" class="form-control" id="jumlahSalinan" name="jumlahSalinan"
placeholder="Jumlah Salinan">
</div>
<div class="form-group">
<label for="hargaBuku">Harga Buku</label>
<input type="number" class="form-control" id="hargaBuku" name="hargaBuku"
placeholder="Harga Buku">
</div>
<div class="form-group">
<label for="image">Pilih Gambar</label>
<input type="file" class="form-control" id="image" name="gambar" onchange="previewImage();">
</div>
<img id="image-preview" src="#" alt="Image preview..."
style="display: none; max-width: 200px; max-height: 200px;">
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<button id="modal-blockui" type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
$('#kategoriBukuTambah').select2({
dropdownParent: $('#tambahBuku')
});
$('#penerbitBukuTambah').select2({
dropdownParent: $('#tambahBuku')
});
<script>
// Lakukan ini sebelum Anda menginisialisasi salah satu modal Anda
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
</script>
Thankyou guys