javascript - วิธีเขียนสตอรี่บุ๊กสำหรับเด็กที่พ่อแม่จัดการสถานะ

ฉันกำลังเขียน Storybook สำหรับองค์ประกอบลูกซึ่งองค์ประกอบพ่อแม่จะจัดการสถานะ ตัวอย่างเช่น value (string) และ onChange (func) ถูกส่งผ่าน props ฉันมีทั้งสอง props ที่ถูกส่ง แต่ฉันไม่แน่ใจว่าจะอัปเดตสถานะในไฟล์ storybook อย่างไร

textfield.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'),
};

ส่วนประกอบจริงของฉันซับซ้อนกว่านี้ แต่ฉันอยากจะแสดงปัญหาให้เห็นได้ง่ายขึ้น