ListBox Widget Moves Undefined Item

I am using Kendo-UI for jQuery, version 2021.1.119.

The issue I have is that I can initialize my ListBox widgets and show the initial state just fine, but when I try to move one item from one ListBox to another, it results in the value being removed from the "from" ListBox and "undefined" being added to the "to" ListBox.

I have the connectWith property set in first ListBox to reference the second and I have verified that the items being added to the ListBox widgets in the initial state are the dataItems I would expect. So I'm unsure why undefined is getting passed around.

Here is a minimal reproducible example: https://dojo.telerik.com/oMOdEmOf

And this is how I'm configuring my two ListBox widgets:

{
    listBox: {
        available: {
            name: 'listbox-roles-available',
            selector: '#listbox-roles-available',

            element: function() {
                const element = $(this.selector);
                return element;
            },
            init: function () {
                const element = this.element();
                if (element) {
                    element.kendoListBox({
                        connectWith: modelUserRoles.listBox.selected.name,
                        dataTextField: 'RoleName',
                        dataValueField: 'RoleId',
                        toolbar: {
                            tools: ['transferTo', 'transferFrom', 'transferAllTo', 'transferAllFrom']
                        }
                    });
                }
                return this.widget();
            },
            setItems: function (items) {
                items = items || [];
                const listbox = this.widget();
                listbox.remove(listbox.items());
                for (let item of items) {
                    listbox.add(item);
                }
            },
            widget: function () {
                const element = this.element();
                return element?.data('kendoListBox');
            }
        },
        selected: {
            name: 'listbox-roles-selected',
            selector: '#listbox-roles-selected',

            element: function() {
                const element = $(this.selector);
                return element;
            },
            init: function () {
                const element = this.element();
                if (element) {
                    element.kendoListBox({
                        dataTextField: 'RoleName',
                        dataValueField: 'RoleId'
                    });
                }
                return this.widget();
            },
            setItems: function (items) {
                items = items || [];
                const listbox = this.widget();
                listbox.remove(listbox.items());
                for (let item of items) {
                    listbox.add(item);
                }
            },
            widget: function () {
                const element = this.element();
                return element?.data('kendoListBox');
            }
        }
    }
}

TLDR; The add method doesn't actually add the entire object, use the setDataSource method instead.

I was able to resolve my issue. It was odd because when I setup breakpoints in the setItems function, when I would execute listbox.add it was adding the object but when I bound the add event to the listbox and inspected the dataItem it was only the text instead of the full object.

So what I changed my setItems function to use the setDataSource method:

setItems: function (items) {
    items = items || [];

    const listbox = this.widget();
    listbox.setDataSource({ data: items });
}