Почему отображается ноль вместо значений, выбранных из ввода множественного выбора?

Я работаю на стороне сервера blazor. Я столкнулся с проблемой, я не могу получить значения, выбранные на странице бритвы

Я могу выбрать данные и заполнить элемент управления select 2, но не могу получить выбранные значения, разделенные запятой снаружи на <p> tag.

Я ставлю точку останова на событие OnSelectedValuesChanged оно не перехватывается и не срабатывает при отладке.

Выдать выбранное значение для выбранных элементов, отображающих нуль

пользовательский элемент управления, который я сделал (Select2MultiSelect.razor)

<select id = "@ElementId" @onchange = "OnSelectionChanged">
    @foreach (var option in Options)
    {
        <option value = "@option.serverID">@option.server_Name</option>
    }
</select>

@code {
    [Parameter] public string ElementId { get; set; } = "select2_" + Guid.NewGuid().ToString("N");
    [Parameter] public List<SelectedServers> Options { get; set; } = new();
    [Parameter] public List<string> SelectedValues { get; set; } = new();
    [Parameter] public EventCallback<List<string>> SelectedValuesChanged { get; set; }

    private async Task OnSelectionChanged(ChangeEventArgs args)
    {
        SelectedValues = await JSRuntime.InvokeAsync<List<string>>("select2Interop.getSelectedValues", ElementId);
        await SelectedValuesChanged.InvokeAsync(SelectedValues);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("select2Interop.initializeSelect2", ElementId);
            await JSRuntime.InvokeVoidAsync("select2Interop.setSelectedValues", ElementId, SelectedValues);
        }
    }

JS-файл, который я использую

Select2JsInterop.js

window.select2Interop = {
    initializeSelect2: function (elementId) {
        $('#' + elementId).select2({
            width: '100%',
            multiple: true
        });
    },

    getSelectedValues: function (elementId) {
        return $('#' + elementId).val();
    },

    setSelectedValues: function (elementId, values) {
        $('#' + elementId).val(values).trigger('change');
    }
};

в файле _host, который я использую

<script src = "~/assets/js/select2jsinterop.js"></script>
    <script src = "_framework/blazor.server.js"></script>

в пользовательском интерфейсе я использую управление, как показано ниже

 <Select2MultiSelect Options = "@SimilarServers" SelectedValues = "@selectedValues" SelectedValuesChanged = "OnSelectedValuesChanged" />
                                        <p>Selected values: @string.Join(", ", @selectedValues)</p>
private void OnSelectedValuesChanged(List<string> newSelectedValues)
    {
        selectedValues = newSelectedValues;
        
    }
private List<SelectedServers> SimilarServers = new()
    {
        new SelectedServers { serverID = 1, server_Name = "atapa222" },
        new SelectedServers { serverID = 2, server_Name = "linuxdata2" }
        
    };
public class SelectedServers
    {
        public int serverID { get; set; }
        public string server_Name { get; set; }
    }

выбранное значение отображает null, почему и как это решить?

Обновленный пост

почему пользовательский элемент управления, который я делаю, получает нулевое значение для выбранного значения

это библиотеки, которые я использую

<script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Select2 CSS -->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel = "stylesheet" />

<!-- Select2 JS -->
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>