classNames.itemChoice is undefined in callbackOnCreateTemplates choice

[greatshieh]

When I called callbackOnCreateTemplates to custom template.

choice: (classNames,data) => {
return templates(
    `<div class="${classNames.item} ${
        classNames.itemChoice
    } ${
        data.disabled
            ? classNames.itemDisabled
            : classNames.itemSelectable
    }" data-choice ${
        data.disabled
            ? 'data-choice-disabled aria-disabled="true"'
            : "data-choice-selectable"
    } data-id="${data.id}" data-value="${data.value}" ${
        data.groupId && data.groupId > 0
            ? 'role="treeitem"'
            : 'role="option"'
    }><span style="margin-right:10px; width:12px; height:12px; background-color:${
        data?.customProperties?.color
    };display:inline-block;vertical-align:middle;margin-top:-2px;"></span>${
        data.label
    }</div>`
);
},

But it worked when the code changed to

choice: ({classNames},data) => {
return templates(
    `<div class="${classNames.item} ${
        classNames.itemChoice
    } ${
        data.disabled
            ? classNames.itemDisabled
            : classNames.itemSelectable
    }" data-choice ${
        data.disabled
            ? 'data-choice-disabled aria-disabled="true"'
            : "data-choice-selectable"
    } data-id="${data.id}" data-value="${data.value}" ${
        data.groupId && data.groupId > 0
            ? 'role="treeitem"'
            : 'role="option"'
    }><span style="margin-right:10px; width:12px; height:12px; background-color:${
        data?.customProperties?.color
    };display:inline-block;vertical-align:middle;margin-top:-2px;"></span>${
        data.label
    }</div>`
);
},

All attr of classNames are undefined. But they are worked in item.

item: (classNames, data) => {
    return templates(
        `<div class="${classNames.item} ${
            data.highlighted
                ? classNames.highlightedState
                : classNames.itemSelectable
        }" data-item data-id="${data.id}" data-value="${
            data.value
        }" ${
            data.active ? 'aria-selected="true"' : ""
        }><span style="margin-right:10px; width:12px; height:12px; background-color:${
            data?.customProperties?.color
        };display:inline-block;vertical-align:middle;margin-top:-2px;"></span>${
            data.label
        }</div>`
    );
}

So, what is the right defined?

Thanks!