react-hook-form v7でhandleSubmitにて正しくデータが取得できない

下記のように実装をしています。

typescript
1import { useState } from 'react';
2import './App.css';
3import { Button, TextField } from '@mui/material';
4import { useForm } from 'react-hook-form';
5
6
7type Inputs = {
8  name: string
9}
10
11function App() {
12  const { register, handleSubmit } = useForm<Inputs>();
13  const [ name, setName ] = useState<string>("");
14  
15  return (
16    <div className="App">
17      <TextField 
18        id="name"
19        value={name}
20        {...register("name")}
21        onChange={(event) => setName(event.target.value)}
22      />
23      <Button
24        variant='contained'
25        onClick={() => {
26          setName("aaa");
27        }}>
28        値変更
29      </Button>
30      <Button
31        variant='contained'
32        onClick={handleSubmit((data) => {
33          console.log(data);
34        })}>
35        SUBMIT
36      </Button>
37    </div>
38  );
39}
40
41export default App;
42

nameというTextFieldを実装して、その値をreact-hook-formのhandleSubmitで取得しサブミットするようにしています。（サンプルソースはログ出力にしています。）
正しく動作すれば、必須チェックなども行う予定です。

SUBMITボタンを押すとdataにはnameの値が入っているのですが、「値変更」ボタンでnameの値を強制的に"aaa"にしたあとにSUBMITボタンを押すと値を変更する前の値がdataから取得できます。
nameのTextFieldにフォーカスしてからSUBMITボタンを押せば値は正しく取得することができます。

このようにreact-hook-formを使用した場合にTextField内の値がユーザーの入力以外によって書き換わる場合はどのように実装すれば正しくデータが取得できますでしょうか。

ありがとうございます。よろしくお願いいたします。

GitHub：https://github.com/houeienoki/react-mui-form-sample