Kendo MultiSelect Virtualization: -Displaying Selected Items First without breaking Virtualization

Question

I am using a Kendo MultiSelect widget with virtualization to handle a large dataset. The issue I am facing is that when the multiselect dropdown is opened, selected items that are not part of the currently loaded subset are not displayed.

function GetUsers() {
    $("#msUsers").kendoMultiSelect({
        placeholder: "Select Users...",
        autoClose: false,
        autoWidth: true,
        /*   tagMode: "none",*/
        dataTextField: "UserName",
        dataValueField: "UserId",
        virtual: {
            itemHeight: 40,
            mapValueTo: "dataItem",
            valueMapper: function(options) {
                var ids = options.value;

                if (!ids.length) {
                    options.success([]);
                    return;
                }

                $.ajax({
                    url: "/Home/GetUserByIds",
                    traditional: true,
                    data: {
                        ids: ids
                    },
                    success: function(response) {

                        if (!response.length) {
                            options.success([]);
                            return;
                        }
                        options.success(response);
                    },
                    error: function(xhr) {
                        console.log("Error:", xhr.responseText);
                    }
                });
            }
        },
        dataSource: {
            transport: {
                read: {
                    url: "/Home/BindUsers",
                    dataType: "json",
                    data: function(options) {
                        return {
                            skip: options.skip,
                            take: options.take,
                            filter: options.filter
                        }
                    }
                },
                parameterMap: function(data, action) {
                    if (action === "read") {
                        return {
                            take: data.take,
                            skip: data.skip,
                            filter: data.filter && data.filter.filters && data.filter.filters[0] ?
                                data.filter.filters[0].value :
                                "" // Default to empty if no filter is applied
                        };
                    } else {
                        return data;
                    }
                }
            },
            schema: {
                data: "Data",
                total: "Total"
            },
            pageSize: 40,
            serverPaging: true,
            serverFiltering: true
        },
        enable: false,
        open: function(e) {

            debugger;
            var multiselect = this;
            var selectedValues = multiselect.dataItems(); // Get the selected value objects

            if (selectedValues.length) {
                var dataSource = multiselect.dataSource;


                var currentData = dataSource.view();


                const selectedUserIds = new Set(selectedValues.map(selected => selected.UserId));


                var remainingUsers = currentData.filter(user =>
                    user.UserId && !selectedUserIds.has(user.UserId)
                );


                var sortedData = selectedValues.concat(remainingUsers);
                console.log(sortedData);


                dataSource.data(sortedData); // THIS BREAKS VIRTUALIZATION!
            }

        },

        height: 400,       
    });
}

I need to ensure that all selected items are displayed first without breaking virtualization.

How can I ensure that all selected items are displayed first in a virtualized Kendo MultiSelect without breaking virtualization? Is there a way to dynamically load selected items and merge them with the current dataSource data?