play: async ({ canvasElement }) => {
		const canvas = within(canvasElement);

		const btn = canvas.getByRole('button');
		const style = window.getComputedStyle(btn);

		await userEvent.click(btn);
                // await shows a TS error "'await' has no effect on the type of this expression.ts(80007)"
		expect(btn).toBeVisible();
                
		expect(style.backgroundColor).toBe('rgb(255, 233, 120)');
		expect(btn.innerText).toBe('Large');
		expect(btn.offsetHeight).toBe(48);
                // all of the expect functions are lining with a message "Interaction should be awaited: toBeeslint[storybook/await-interactions](https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/await-interactions.md)"
	},