watch not working when setValue sets nested objects - react-hook-form

Question

I pass a complete object to setValue and the input box is updated correctly, but my watch is not printing:
import { useForm } from "react-hook-form";
export default function App() {
const form = useForm({
defaultValues: {
detail: {
firstName: "",
lastName: ""
}
}
});
console.log("watch:", form.watch("detail.firstName"));
const setValueWhole = () => {
form.setValue("detail", {
firstName: "firstName",
lastName: "lastName"
});
};
const setValueEach = () => {
form.setValue("detail.firstName", "firstName1");
form.setValue("detail.lastName", "lastName1");
};
return (
<div className="App">
<form onSubmit={form.handleSubmit(console.log)}>
<input {...form.register("detail.firstName")} />
<input {...form.register("detail.lastName")} />
<div>
<button type="button" onClick={setValueWhole}>
setValue whole
</button>
<button type="button" onClick={setValueEach}>
setValue each
</button>
</div>
</form>
</div>
);
}
Initially, the console printed:
watch: ""
Clicking the setValue whole button, the value of the input box is updated, but the console is not printing again, am I doing something wrong?
watch: ""
# Nothing prints after clicking...
If I click setValue each, it will print correctly:
watch: ""
watch: "firstName1"