Form toggle with input clearing

It is necessary to implement clearing the input field value when the checkbox state changes. When checked, the first form is displayed; when unchecked, the second. When switching forms, its content should be reset.

import React from 'react';

export function App(props) {
    const [checked, setChecked] = React.useState(true);

    const onToggle = event => {
        setChecked(event.target.checked);
    };

    const FormOne = () => {
        return (
            <form>
                <label>Name 1</label>
                <input type='text' />
            </form>
        );
    };

    const FormTwo = () => {
        return (
            <form>
                <label>Name 2</label>
                <input type='text' />
            </form>
        );
    };

    const activeForm = checked ? <FormOne /> : <FormTwo />;

    return (
        <div className='App'>
            <div>
                <label>test</label>
                <input type='checkbox' checked={checked} onChange={onToggle} />
            </div>
            {activeForm}
        </div>
    );
}