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?