Issue with Select2 Loading Inside Livewire Modal - Help Needed

Question

I'm using Laravel Livewire to create a modal with a form, but select2 is not loading properly inside the modal. If saved outside the modal select2 runs properly. I've searched the same forum topic, but haven't found a solution. Can anyone help me identify what might be wrong?

<div wire:ignore.self class="modal fade" id="modalCreate" tabindex="-1" data-bs-backdrop="static"
    data-bs-keyboard="false" aria-labelledby="staticBackdropLabel" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center">
                <h4 class="modal-title" id="myLargeModalLabel">Add New Products</h4>
                <button class="btn-close" wire:click="closeModal()" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form wire:submit="storeProducts">

                    <!--  put the select2 here -->


                    <div class="modal-footer">
                        <button class="btn btn-sm btn-dark" wire:click="closeModal()" data-bs-dismiss="modal"
                            type="button">Cancel</button>
                        <button type="submit" class="btn btn-sm btn-primary">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div wire:ignore>
    <label for="taskSelect" class="form-label">Select Tasks</label>
    <select class="form-control form-select" id="taskSelect" multiple="multiple" wire:model.live="selectedTasks">
        <option id="asd"> asd </option>
        <option id="dfg"> dfg </option>
        <option id="hgh"> hgh </option>
    </select>
    <script>
        $(document).ready(function () {
            $('#taskSelect').select2();
        });
    </script>
</div>

Answer 1

As Benilson suggested, using dropdownParent solves the problem

window.addEventListener('show-modal-create', event => {
        $('#modalCreate').modal('show');
        $('#taskSelect').select2({
            dropdownParent: $('#modalCreate')
        });
    });