estoy complicado con un formulario realizado con react hook form y no se como solucionarlo, tengo un input con un boton de agregar type="button" y al agregar se muestra en un div, pero al estar en el formulario al presionar ENTER se envia todos los datos del formulario, dandome error si los campos estan vacios (por las validaciones de register). Mi idea es que al estar posicionado en el input y presionar enter se guarda la info tipeada y no que se envie el formulario completo.
[![https://i.sstatic.net/I8Y6E.jpg][1]][1]
esto es el componente tagsInput:
<>
<div className="form-control container-tags">
{tags.map((tag, index) => (
<div key={index} className="tag-item">
<span className="tag-text">{tag}</span>
<span className="tag-closed" onClick={() => removeTag(index)}>
×
</span>
</div>
))}
</div>
<div className='tags-input-container'>
<input
onChange={(e) => handleKeyDown(e)}
onKeyDown={(e) => handleKeyEnter(e.key)}
type="text"
name={name}
value={text}
placeholder="Ingrese... "
className={"tags-input"}
/>
<button
name={name}
type="button"
className='btn btn-success'
onClick={() => saveTags()}>Agregar</button>
</div>
</>
) ```
[1]: https://i.sstatic.net/I8Y6E.jpg