I am writing a Storybook for a child element where the parent will manage the state. For example, the value(string) and the onChange(func) are passed through props. I have both props being passed, but I'm unsure how to update the state in the storybook file.

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;

Storybook file

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

My actual component is more complex, but I wanted to show the issue more easily.