Teniendo el siguiente componente:

 import { yupResolver } from '@hookform/resolvers/yup'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { useToggle } from '../shared/hooks'; import { SubsectionLayout, Footer, Textarea, Input, Modal, Button } from '../shared/ui-components'; const schema = yup.object().shape({ name: yup.string().required(), description: yup.string().required() }); export interface ITask { name: string; description: string; } export function MainComponent() { const [isOpened, toggleModal] = useToggle(false); const { handleSubmit, register, reset } = useForm({ resolver: yupResolver(schema) }); const onSubmit = (data: ITask) => { console.log('data: ', data); toggleModal(); reset(data); }; return ( <div> <Button onClick={toggleModal} /> <SubsectionLayout title='test'> <Modal title='add element' open={isOpened} onClose={toggleModal} footer={ <Footer onSubmit={handleSubmit(onSubmit)} onCancel={toggleModal} editMode={true} /> } > <div> <Input inputId='calculation-engine-script-name' label='name' {...register('name')} /> <Textarea label='description' {...register('description')} /> </div> </Modal> </SubsectionLayout> </div> ); } export default MainComponent;

Tiene un botón, cuando se hace clic, abre un modal donde un usuario puede escribir dentro de los campos de name y description .

Cuando se hace clic en el botón Enviar, debe registrar el contenido (para fines de prueba) y cerrar el modal.

El problema es que cuando abro nuevamente el modal, la entrada que se introdujo antes todavía está allí.

Agregué reset(data) dentro onSubmit() pero no parece ser suficiente.

¿Algunas ideas?