javascript - איך לכתוב ספר סיפורים לילד שהורה מנהל את המצב

אני כותב ספר סיפורים לרכיב ילד שבו ההורה ינהל את הסטייט. לדוגמה, ה-value(מחרוזת) וה-onChange(פונקציה) מועברים דרך props. יש לי את שני ה-props מועברים, אבל אני לא בטוח איך לעדכן את הסטייט בקובץ הסיפור.

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

הרכיב בפועל שלי יותר מורכב, אבל רציתי להראות את הבעיה בצורה יותר קלה.