dxDataGrid keep firing event onEditorPrepared non-stop

Question

I'm working on DevExtreme's dxDataGrid using jQuery and Javascript.

In my datagrid, there are 2 main columns: expense_code and item_id. These two columns are cascading lookups. expense_code is like a group of items so it should be selected first to filter items in item_id column. The data for both lookup columns derive from master tables ExpenseCode and ItemMaster respectively.

These two columns are now working fine. The problem is that, after item in item_id is selected, the detail of selected item should be fill in other columns (for example, item_unit_name). In my code, I tried to set grid data in onEditorPrepared event using cellValue function. However, after I tried to select item, it trigger this event non-stop for some reason. Here is my code:

$('#grid_Item').dxDataGrid({
    dataSource: orderItemStore,
    editing: {
        mode: 'batch',
        newRowPosition: 'last',
        allowUpdating: true,
        allowDeleting: true,
        allowAdding: true,
    },
    columns: [{
        caption: 'No',
        width: 40,
        cellTemplate(cell, info) {
            cell.text(info.row.rowIndex + 1);
        },
    }, {
        caption: 'Expense Code',
        dataField: 'expense_code',
        width: 120,
        cellTemplate(cell, info) {
            cell.text(info.data.expense_code);
        },
        lookup: {
            dataSource: {
                paginate: true,
                pageSize: 10,
                store: expenseCodeStore,
            },
            valueExpr: "expense_code",
            displayExpr(item) {
                return `${item.expense_code} : ${item.expense_name}`;
            },
            allowClearing: true,
        },
        editorOptions: {
            dropDownOptions: {
                minWidth: 300,
            },
        },
        validationRules: [{ type: "required" }]
    }, {
        caption: 'Material',
        dataField: 'item_id',
        lookup: {
            dataSource(options) {
                let selectedExpenseCode = options?.data?.expense_code;

                console.log({ selectedExpenseCode });   //this line seems working properly

                return {
                    paginate: true,
                    pageSize: 10,
                    store: new DevExpress.data.CustomStore({
                        key: 'item_id',
                        loadMode: 'raw',
                        load() {
                            return $.getJSON('?handler=ItemMasters', { expenseCode: selectedExpenseCode });
                        },
                        byKey(key) {
                            return $.getJSON('?handler=ItemMaster', { itemId: key });
                        },
                    }),
                };
            },
            valueExpr: "item_id",
            displayExpr: "item_name",
            allowClearing: true,
        },
        validationRules: [{ type: "required" }]
    }, {
        ...
    }, {
        caption: 'Unit',
        dataField: 'item_unit_name',
        width: 80,
        validationRules: [{ type: "required" }],
    }, {
        ...
    }],
    onEditorPrepared(e) {
        if (e.dataField == "item_id") {
            $(e.editorElement).dxSelectBox("instance").on("selectionChanged", function (args) {

                console.log(`setting unit name...`)

                var grid = $("#grid_Item").dxDataGrid("instance");
                var index = e.row.rowIndex;
                var result = args.selectedItem.item_unit_name;
                grid.cellValue(index, "item_unit_name", result);    //this line cause infinite event looping
            });
        }
    },
    ...
    remoteOperations: false,
    showBorders: true,
});

When the event is looping, the console will have two logs from datasource of item lookup and onEditorPrepared event repeating infinitely.