I created an update function wherein there is a specific function in my radio button wherein if the user selected no/none it will reset the other form into empty string or make it null, but the problem I’m encountering is, even though I created a form.reset(), It won’t work.

UpdateForm.tsx

  const appoinment = useQuery({
    queryKey: ['appointment', 'data', 'history', id],
    queryFn: () => fetch(`/api/single-sched/${id}`).then((res) => res.json())
  })


  const { data } = appoinment

  const form = useForm<CreateAppointmentSchemaType>({
    resolver: zodResolver(CreateAppointmentSchema),
  });

  const handleClick = () => {
    form.resetField("dry_run_date");
    form.resetField("dry_run_start_time");
    form.resetField("dry_run_end_time");
  };


  return (
<FormField
                  control={form.control}
                  name="does_have_dry_run"
                  render={({ field }) => (
                    <FormItem className="space-y-3">

                      <FormControl>
                        <RadioGroup
                          onValueChange={(value) =>
                            field.onChange(value === "true")
                          }
                          defaultValue={String(field.value)}
                          className="flex flex-col space-y-1"
                        >
                          <FormItem className="flex items-center space-x-3 space-y-0">
                            <FormControl>
                              <RadioGroupItem
                                onClick={handleClick}
                                value="false" />
                            </FormControl>
                            <FormLabel className="font-normal">
                              None / No
                            </FormLabel>
                          </FormItem>
                          <FormItem className="flex items-center space-x-3 space-y-0">
                            <FormControl>
                              <RadioGroupItem value="true" />
                            </FormControl>
                            <FormLabel className="font-normal">
                              Yes
                            </FormLabel>
                          </FormItem>
                        </RadioGroup>
                      </FormControl>

                      {field.value === true && (
                        <FormItem>
                          <div className="flex flex-col gap-2 pt-2">
                            <Label>(Dry Run) Time of Event</Label>
                            <div className="flex flex-col gap-2">
                              <FormField
                                control={form.control}
                                defaultValue={data?.dry_run_date || ""}
                                name="dry_run_date"
                                render={({ field }) => (
                                  <FormItem className="flex flex-col">
                                    <FormLabel>Date</FormLabel>
                                    <Popover>
                                      <PopoverTrigger asChild>
                                        <FormControl>
                                          <Button
                                            variant={"outline"}
                                            className={cn(
                                              "w-[240px] pl-3 text-left font-normal",
                                              !field.value &&
                                              "text-muted-foreground"
                                            )}
                                          >
                                            {field.value ? (
                                              format(field.value, "PPP")
                                            ) : (
                                              <span>Pick a date</span>
                                            )}
                                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                                          </Button>
                                        </FormControl>
                                      </PopoverTrigger>
                                      <PopoverContent
                                        className="w-auto p-0"
                                        align="start"
                                      >
                                        <Calendar
                                          mode="single"
                                          disabled={(date) =>
                                            new Date(date) <= new Date()
                                          } // Disable past dates and today's date
                                          selected={field.value}
                                          onSelect={field.onChange}
                                          initialFocus
                                        />
                                      </PopoverContent>
                                    </Popover>
                                    <FormMessage />
                                  </FormItem>
                                )}
                              />
                              <SeletGroupFieldInput
                                name="dry_run_start_time"
                                placeholder="Select time"
                                defaultValue={data?.dry_run_start_time || ""}

                                control={form.control}
                                label="Start"
                              />
                              <SeletGroupFieldInput
                                name="dry_run_end_time"
                                defaultValue={data?.dry_run_end_time || ""}

                                placeholder="Select time"
                                control={form.control}
                                label="End"
                              />


                            </div>
                          </div>
                        </FormItem>
                      )}

                      <FormMessage />
                    </FormItem>
                  )}
                />
)

This is my selectfield group, it’s just for my formfield that uses input.

SelectFieldGroup.tsx

const SelectFieldInput = ({
    control,
    name,
    label,
    placeholder,
    data,
    defaultValue,
    className
} : SelectFieldGroup) => {
  return (
    <>
      <FormField
        control={control}
        name={name}
        defaultValue={defaultValue}
        render={({ field }) => (
          <FormItem className={cn(className)}>
            <FormLabel>{label}</FormLabel>
            <Select onValueChange={field.onChange} defaultValue={field.value}>
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder={placeholder} />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {data.map((item, index) => (
                    <SelectItem key={index} value={item.id}>
                        {item.label}
                    </SelectItem>
                ))}
               
              </SelectContent>
            </Select>

            <FormMessage />
          </FormItem>
        )}
      />
    </>
  );
};