React / NextJS - Form Value not clearing on refresh?

I have a parent component that looks like this:

const Thought = ({ onSubmit }: Props) => {
    const [thought, setThought] = React.useState('');
    const onThoughtChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
        setThought((e.target as HTMLTextAreaElement).value);
    }

    return (
        <ContentBox>
            <Textarea
                name="thought"
                label="What thought do you want to capture?"
                value={thought}
                onValueChange={onThoughtChange}
            />
            <Submit label='Save' onSubmit={ (e) => {onSubmit(thought)} } />
        </ContentBox>
    );
}

I have a child component that looks like this:

const TextInput = ({ label, name, value, onValueChange }: Props) => (
    <div className="space-y-6 bg-white px-4 py-5 sm:p-6">
        <div className="space-y-6 bg-white">
            <div>
                <label htmlFor={name} className="...">{label}</label>
                <div className="mt-1">
                    <input type="text" onChange={onValueChange} id={name} name={name} className="..." value={value} />
                </div>
            </div>
        </div>
    </div>
)

Issue

1. I enter a value into the textarea
2. I hit refresh

I expect it to clear the value. Instead the old value persists..

I added two fields to a form. If I populate the first field and refresh the value is retained. If I update the second field, the value in the first will disappear. It feels like the initial state in the parent element is not being assigned to the form element and I cannot figure out why.

Any ideas or feedback would be most welcome. Thanks.