field.value and form.getValues gives different value when value is set to undefined

[Thesmit113]

I am using shadcn/ui's form component with react-day-picker.

here is my code :
<FormField control={form.control} name="engagement_date" render={({ field }) => ( <FormItem className="tw-mb-6 tw-group"> <div className="tw-grid tw-gap-3 tw-grid-cols-[0.75fr,2fr] tw-items-center tw-w-full"> <FormLabel>Engagement Date</FormLabel> <div className="tw-flex tw-items-center tw-gap-2"> <Popover> <PopoverTrigger asChild disabled={!isEditingWhole && editingField !== "engagement_date"}> <FormControl className="tw-w-3/4"> <Button variant={"outline"} className={cn("tw-max-w-[280px] tw-text-left tw-font-normal", !field.value && "tw-text-muted-foreground", "disabled:tw-opacity-90")}> {field.value ? format(field.value, "dd-MMM-yyyy") : <span>Pick a engagement date</span>} <CalendarDays className="tw-ml-auto tw-h-4 tw-w-4 tw-opacity-50" /> </Button> </FormControl> </PopoverTrigger> <PopoverContent className="tw-w-auto tw-p-0" align="start"> <Calendar mode="single" captionLayout="dropdown-buttons" selected={field.value} onSelect={field.onChange} disabled={(date) => date > new Date() || date < new Date("1900-01-01")} initialFocus fromYear={new Date().getFullYear() - 100} toYear={new Date().getFullYear()} /> </PopoverContent> </Popover> {!isEditingWhole && ( <div className="tw-flex tw-items-center"> {editingField === "engagement_date" ? ( isSubmitting ? ( <DotLoader /> ) : ( <div className="tw-flex tw-items-center"> <Button size="xs" type="button" variant="ghost" className="tw-rounded-full" onClick={() => handleUpdateUserField("engagement_date", form.getValues("engagement_date"))}> <CheckIcon color="#22c55e" size={18} strokeWidth={2} /> </Button> <Button size="xs" type="button" variant="ghost" onClick={() => toggleEditField("engagement_date")} className="tw-rounded-full"> <X color="#E54D2E" size={18} strokeWidth={2} /> </Button> </div> ) ) : ( !editingField && ( <Button className="tw-rounded-full tw-opacity-0 tw-transition-all group-hover:tw-opacity-100" size="xs" type="button" variant="ghost" onClick={() => toggleEditField("engagement_date")}> <Pencil color="#6366f1" size={16} /> </Button> ) )} </div> )} </div> </div> <FormMessage /> </FormItem> )} />;

so most of the times when I de-select the selected date ( or changing other dates and then de-select ), the form.value set to old value while form.getValues('engagement_date') shows undefined.

and sometimes ( 2-4 ) times both logged undefined, and it is not happening while adding date (in my addUser component ), it only happening in editUser component ( I mean when the value is available )

I have now change the to following and it is working fine, but I want to know why both showing different.

changed code :
{form.getValues("engagement_date") ? format(form.getValues("engagement_date"), "dd-MMM-yyyy") : <span>Pick a wedding date</span>}

<Calendar mode="single" captionLayout="dropdown-buttons" selected={form.getValues("engagement_date")} onSelect={field.onChange} disabled={(date) => date > new Date() || date < new Date("1900-01-01")} initialFocus fromYear={new Date().getFullYear() - 100} toYear={new Date().getFullYear()} />