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!