Form not working after add react-hook-form

Question

After add react-hook-form to simple validate the form, the field became read only. What am I doing wrong?. It´sa netlify's form. The alert are working, but I cant write or send the form. I'm trying to understand how react-hook-form works. Do I have to change the all logic of the form? Does react-hook-form handle everything under the hood?

 import React, { useState } from 'react' import { navigate } from 'gatsby' import { FormWrapper } from './ContactForm.styles' // import react-hook-form import { useForm } from 'react-hook-form' const contact = () => { const [formState, setFormState] = useState({ name: '', email: '', message: '' }) const encode = data => { return Object.keys(data).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&') } const handleChange = e => { setFormState({...formState, [e.target.name]: e.target.value }) } // react-hook form const { register, handleSubmit, formState: { errors } } = useForm() // submit const handleRegistration = e => { fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: encode({ 'form-name': 'contact', ...formState }) }).then(() => { navigate('/thanks/') }) } return ( <form onSubmit={handleSubmit(handleRegistration)} name="contact" method="POST" data-netlify="true" data-netlify-honeypot="bot-field" > <FormWrapper> <div className="form-name"> <label htmlFor="name">Name:</label> <input type="text" name="name" onChange={handleChange} value={formState.name} placeholder="your name..." id="name" // react-hook-form aria-invalid={errors.name? 'true': 'false'} {...register('name', { required: true })} /> // react-hook-form {errors.name && <span role="alert">Required</span>} <button type="submit">Submit</button> </div> </FormWrapper> </form> ) } export default contact

Answer 1

According to the React Hook Form - Getting Started

 import React, { useState } from 'react' import { navigate } from 'gatsby' import { FormWrapper } from './ContactForm.styles' // import react-hook-form import { useForm } from 'react-hook-form' const contact = () => { const encode = data => { return Object.keys(data).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&') } // react-hook form const { register, handleSubmit, formState: { errors } } = useForm() // submit const handleRegistration = (values) => { fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: encode({ 'form-name': 'contact', ...values }) }).then(() => { navigate('/thanks/') }) } return ( <form onSubmit={handleSubmit(handleRegistration)} data-netlify="true" data-netlify-honeypot="bot-field" > <FormWrapper> <div className="form-name"> <label htmlFor="name">Name:</label> <input type="text" placeholder="your name..." id="name" aria-invalid={errors.name? 'true': 'false'} {...register('name', { required: true })} /> // react-hook-form {errors.name && <span role="alert">Required</span>} <button type="submit">Submit</button> </div> </FormWrapper> </form> ) } export default contact