Javascript react hook表单字段在提交后刷新

我将我的react hook表单字段作为子函数发送到另一个函数组件。按下提交按钮后，字段刷新，输入的值被删除。有什么问题

我的文件

App.js

：

从“React”导入React；
导入“/styles.css”；
从“react hook form”导入{useForm}；
从“@material ui/core”导入{Box，Button，Grid，TextField}；
导出默认函数App（）{
常量{register，handleSubmit}=useForm（）；
提交函数（数据）{
控制台日志（数据）；
}
功能字段组件（道具）{
const{title，children}=道具；
返回(
{title}
{儿童}
);
}
返回(
提交
);
}

最好将子组件移动到自己的子组件中，否则，每次重新渲染都会装载和卸载组件

function FieldComponent(props) {
  const { title, children } = props;
  return (
    <Grid container alignItems="center">
      <Grid item xs={3}>
        <Box py={5}>
          <div fontWeight="bold" fontSize="16">
            {title}
          </div>
        </Box>
      </Grid>
      <Grid item xs={9}>
        <Box py={5}>{children}</Box>
      </Grid>
    </Grid>
  );
}

export default function App() {
  const { register, handleSubmit } = useForm();

  function onSubmit(data) {
    console.log(data);
  }

  return (
    <div className="App">
      <Grid container>
        <Grid item xs={12}>
          <FieldComponent title="name">
            <TextField variant="outlined" name="name" inputRef={register} />
          </FieldComponent>
        </Grid>
        <Grid item xs={12}>
          <Button variant="outlined" onClick={handleSubmit(onSubmit)}>
            Submit
          </Button>
        </Grid>
      </Grid>
    </div>
  );
}

功能字段组件（道具）{
const{title，children}=道具；
返回(
{title}
{儿童}
);
}
导出默认函数App（）{
常量{register，handleSubmit}=useForm（）；
提交函数（数据）{
控制台日志（数据）；
}
返回(
提交
);
}

---

谢谢你，你帮了我很多忙