Warning: value prop on input should not be null when using watch + zod schema + setValue

[khurram-ansari]

Reproduction link of the issue
https://stackblitz.com/edit/vitejs-vite-gjacev?file=src%2FApp.tsx

I have a conditional form like this.

I have two fields in schema shipping and billing and I have assigned the default value for billing as null

Here is my schema and default values

SCHEMA

const addressSchema = z.object({
  address: z.string().min(1, 'Address is required'),
  city: z.string().min(1, 'City is required'),
});

const FormSchema = z.object({
  firstName: z.string().min(1, 'FirstName is required'),

  billing: addressSchema.nullable(),

  shipping: addressSchema,

  shippingDifferentThanBilling: z.enum(['YES', 'NO']),
});

DEFAULT VALUES

const addressDefaultVals = {
  address: '',
  city: '',
};

const form = useForm<z.infer<typeof FormSchema>>({
  resolver: zodResolver(FormSchema),
  defaultValues: {
    firstName: '',
    shipping: addressDefaultVals,
    billing: null,
    shippingDifferentThanBilling: 'NO',
  },
});

And I watching the radio button value to toggle the form like this

const { watch, setValue, resetField } = form;
  const showBillingForm = watch('shippingDifferentThanBilling');

  useEffect(() => {
    if (showBillingForm === 'YES') {
      setValue('billing', addressDefaultVals);
    } else {
      resetField('billing');
    }
  }, [showBillingForm]);

{showBillingForm === 'YES' && (
         //AddressFields is the component to show fields in both shipping and billing form
         <AddressFields heading="Billing form" prefix="billing" />
)}

ADDRESSFIELDS COMPONENT looks like this

const AddressFields = ({
  heading,
  prefix,
}: {
  heading: string;
  prefix: 'billing' | 'shipping';
}) => {
  const form = useFormContext<FormType>();
  return (
    <>
      <h2>{heading}</h2>
      <FormField
        control={form.control}
        name={`${prefix}.address`}
        render={({ field }) => (
          <FormItem>
            <FormLabel>Address</FormLabel>
            <FormControl>
              <Input placeholder="Address..." {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
//... city field markup
    </>
  );
};

But when I am toggling the form I am getting this ERROR in console