useWatch still returning “| undefined” even after setting defaultValues

As you can see here, I’m setting default values for everything:

const {
  register,
  handleSubmit,
  setValue,
  getValues,
  control,
  formState: { errors },
} = useForm<FormData>({
  resolver: zodResolver(vcardContentSchema),
  defaultValues: {
    basicInfo: {
      title: vcard.content.basicInfo.title || '',
      heading: vcard.content.basicInfo.heading || '',
      subheading: vcard.content.basicInfo.subheading || '',
      avatar: vcard.content.basicInfo.avatar || '',
    },
});

const formValues = useWatch({
  control,
  defaultValue: getValues(),
});

However, when I inspet formValues, I can see that basicInfo becomes undefined:

basicInfo?: {
  title?: string | undefined;
  heading?: string | undefined;
  subheading?: string | undefined;
  avatar?: string | undefined;
} | undefined;

How to make it so that basicInfo doesn’t become undefined?

You need to sign in to view this answers