Using <Cotroller /> for object fields

[Melancholism]

I have a simple form with default values set as follows:

  const methods = useForm({
    defaultValues: {
      car: {
        name: "",
        model: "",
      },
    },
  });

My component renders two inputs using <Controller/>. The first input is supposed to be an MUI Autocomplete (for the sake of simplicity, it renders nothing but a single div in this CSB) that sets the whole car object (name="car"). and the second one simply changes the car's name (name="car.name"). The issue is when I set the car value in the first input, the second one doesn't show the set car name.

I simulated this process by rendering a simple button that sets the car object value using the setValue function here in this CSB.
The issue gets fixed when I change the first input's name to car.model. But in the case that the first input's name is car, pressing the setter button doesn't set the car name text input. Am I doing anything wrong here? Am I not supposed to achieve my goal this way? Any help would be appreciated a lot. Thanks in advance.

[sujinleeme]

It would help if you fix handleSetFields to update fields individually to make each controller see the changes.
<Controller name="car.model"> doesn't know car object has changed. It only detects field changes.

  const handleSetFields = () => {
    setValue("car.name", "Ford")
    setValue("car.model", "Mustang");
  };

[Melancholism]

Oh! I see!

It only detects its field changes.

That's the point I was missing.

Thank you for your time. Appreciate it.