Reactjs 添加反应钩窗体后窗体不工作

添加react hook表单以简单验证表单后，该字段变为只读。我做错了什么？。这是一种网络形式。警报正在运行，但我无法编写或发送表单。我想了解react hook表单是如何工作的。我必须更改表单的所有逻辑吗？react hook form能处理引擎盖下的所有东西吗

import React，{useState}来自“React”
从“盖茨比”导入{navigate}
从“./ContactForm.styles”导入{FormWrapper}
//导入钩形表单
从“react hook form”导入{useForm}
常量联系人=（）=>{
常量[formState，setFormState]=useState({
名称：“”，
电子邮件：“”，
消息：“”
})
常量编码=数据=>{
返回Object.keys（数据）
.map（key=>encodeURIComponent（key）+'='+encodeURIComponent（data[key]））
.join（“&”）
}
常量handleChange=e=>{
setFormState({
…formState，
[e.target.name]：e.target.value
})
}
//反作用钩形
常数{
登记
手推，
formState:{errors}
}=useForm（）
//提交
常量HandlerRegistration=e=>{
获取（“/”{
方法：“POST”，
标题：{'Content Type'：'application/x-www-form-urlencoded'}，
正文：编码（{'formname'：'contact'，…formState}）
}).然后（（）=>{
导航（“/谢谢/”）
})
}
返回(
姓名：
//反作用钩形
{errors.name&&Required}
提交
)
}
导出默认联系人

，根据

import React，{useState}来自“React”
从“盖茨比”导入{navigate}
从“./ContactForm.styles”导入{FormWrapper}
//导入钩形表单
从“react hook form”导入{useForm}
常量联系人=（）=>{
常量编码=数据=>{
返回Object.keys（数据）
.map（key=>encodeURIComponent（key）+'='+encodeURIComponent（data[key]））
.join（“&”）
}
//反作用钩形
常数{
登记
手推，
formState:{errors}
}=useForm（）
//提交
常量HandlerRegistration=（值）=>{
获取（“/”{
方法：“POST”，
标题：{'Content Type'：'application/x-www-form-urlencoded'}，
正文：编码（{'formname'：'contact'，…values}）
}).然后（（）=>{
导航（“/谢谢/”）
})
}
返回(
姓名：
//反作用钩形
{errors.name&&Required}
提交
)
}
导出默认联系人

谢谢Joris！我按照文档进行操作，但没有得到结果。