Cannot select option from select input that use select2 js

Is this a bug?
#1

I am using Select2 JS (https://select2.org/) with Laravel Blade, including the option to load data via AJAX.

The select inputs for Location, Category , Tag , and Author are functioning correctly. The Location input allows only one option to be selected, while Category , Tag , and Author allow multiple selections.
See bellow image

However, the select input named Parent is not working. Although the data loads properly, I am unable to select an option from it. This input should also allow only a single option to be selected.
See the image bellow

Another select input named Select News (field name Read More) is not working. Although all options are successfully loaded, I cannot select an option. It is a multi-select input.
See the image bellow

See bellow JavaScript for Location , Category , Tag and Author .

$(".page-dynamic-section [name='read_more_ids[]']").select2({
    width: '100%',
    multiple: true,
    allowClear: true,
    theme: "bootstrap-5",
    closeOnSelect: false,
    minimumInputLength: 5,
    placeholder: "{{ __('Please select') }}",
    ajax: {
        url: "{{ route('search.newses') }}",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                name: params.term
            };
        },
        processResults: function (data) {
            return {
                results: data.map(function (obj) {
                    return { id: obj.id, text: obj.title };
                })
            };
        },
        cache: false
    }
});
    
$('.page-dynamic-section .create-edit-form [name="parent_id"]').select2({
    width: '100%',
    multiple: false,
    allowClear: true,
    theme: "bootstrap-5",
    closeOnSelect: false,
    minimumInputLength: 3,
    placeholder: "{{ __('Please select') }}",
    ajax: {
        url: "{{ route('search.newses') }}",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                name: params.term
            };
        },
        processResults: function (data) {
            var results = $.map(data, function (obj) {
                return {
                    id: obj.id,
                    text: obj.title
                };
            });

            return {
                results: results
            };
        },
        cache: true,
        cacheKey: function (params) {
            return "{{ env('APP_NAME') }}" + "{{ env('APP_ENV') }}" + "{{ Auth::id() }}" + "parent-news-input-from-create-news-form-" + params.term;
        }
    }
});

See video Recording 2024-06-13 225749.mp4 - Google Drive
All these input are used on the same page and same form and the data is loading (via AJAX).

I need to solve it soon. Please help me.