javascript - 如何为由父组件管理状态的子组件编写storybook

我正在为一个子组件编写 Storybook，其中父组件将管理状态。例如，value（字符串）和 onChange（函数）通过 props 传递。我已经传递了这两个 props，但我不确定如何在 Storybook 文件中更新状态。

文本框.tsx

import React, { FC, HTMLProps } from 'react';

type FirstNameTextFieldProps = HTMLProps<HTMLInputElement>

const FirstNameTextField: FC<FirstNameTextFieldProps> = ({
    ...restOfProps
}) => (
    <input
        type="text"
        id="fname"
        name="fname"
        {...restOfProps}
    />
);

export default FirstNameTextField;

故事书文件

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import FirstNameTextField from './test';

export default {
    title: 'FirstNameTextField',
    component: FirstNameTextField,
    description: 'A First Name TextField.',
} as Meta;

const Template: Story = (args) => <FirstNameTextField {...args} />;

export const Default = Template.bind({});
Default.args = {
    value: 'Jason',
    onChange: () => Alert('value changed'),
};

我实际上的组件更复杂，但我想更容易地展示这个问题。