This is fine, but just as a tip for easier authoring and maintenance, it will be a lot simpler to showcase the component in uncontrolled mode if the component supports it. It will literally be a one-liner 😄

Wow, so easy! And more ideal. Thanks for letting me know!

But then we can't reproduce the onChange moving on Storybook, but that's not a problem, right? Or I guess I might miss something...

The onChange should still be observable in the Actions panel as before. Is it not working in your environment? The only reason we need to merge the incoming onChange function is when it's used in controlled mode and you need to call the setValue as well.

In my environment, the story of the AlignmentToolbar component does not work properly. The onChange event is fired, but the text alignment is not updated. Does this component not support uncontrolled mode?

Ah right, my bad! I guess it doesn't support uncontrolled. I'd still recommend using CSF 3 format (instead of the Template.bind()) for new stories though:

export const Default = {
	render: function Template( { onChange, ...args } ) {
		const [ value, setValue ] = useState();
		return (
			<AlignmentToolbar
				{ ...args }
				onChange={ ( ...changeArgs ) => {
					onChange( ...changeArgs );
					setValue( ...changeArgs );
				} }
				value={ value }
			/>
		);
	},
};

Thank you two! I updated as you wrote.