When using useWatch or watch, it has the old value, but when using useController, it reflects the latest value. What is the difference?

[juyeong-s]

I am using react-hook-form, and if I use watch or useWatch returned by useFormContext, the value of the field changed in the child component is not reflected, but if I use useController, it is reflected. What is the difference between the two?
There is a function to remove items from an array using useFieldArray in a child component. However, there was a phenomenon in which the previous value was retained in the parent component after removal, so it was changed to after in the example.

before

  const { control } = useFormContext();

  const { replace } = useFieldArray({
    name: 'confirmList',
    control,
  });

  const confirmList = useWatch({ control, name: 'confirmList' });

after

const { control } = useFormContext();

const {
  field: { value: confirmList },
} = useController({ name: 'confirmList', control });

const { replace } = useFieldArray({
  name: 'confirmList',
  control,
});