Is there a way to combine the @addon-docs Args with the useState hooks?

[dmarcanoalxn]

I'm wondering if I could do something like the following. i.e. combining both the new Args and the useState hook:

export default {
	title: "Example/Modals",
	component: ModalContainer,
	argTypes: {
		active: { control: { type: "boolean" }},
	},
};

const Template = (args: any) => {
	const [active, setActive] = useState(true);
	return <ModalContainer active={active} onClose={() => setActive(false)} {...args} />;
};

export const Modal = Template.bind({});

As of now, this initially shows my modal (expected). When I click on its close button (executing its onClose function), the modal is closed (expected). Once I edit the active property from the @addon-docs props table the modal re-appears (expected), but when I click on its close button, the onClose function no longer alters the active state/prop.

Could anyone help me understand how to move on from here? ☹️

[shilman]

I'd probably use useArgs and skip useState entirely.

Example: #3855 (comment)