[bug]: DatePicker form error giving default value null

Describe the bug

I am using Calender with react hook form and passing defautValue as null. After clicking submit it converted my value to a date 01 01 1970.

Affected component/components

Calender

How to reproduce

import { Popover, PopoverTrigger } from "@radix-ui/react-popover"; import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "./ui/form";

import { cn } from "@/lib/utils"; import { Button } from "./ui/button"; import { format } from "date-fns"; import { fr } from "date-fns/locale"; import { CalendarIcon } from "lucide-react"; import { PopoverContent } from "./ui/popover"; import { Calendar } from "./CustomCalender"; import { Control, FieldValues } from "react-hook-form"; import { RequiredFormLabel } from "./RequiredFormLabel";

type Props< TFieldValues extends FieldValues = FieldValues, TContext = unknown

= { name: string; label: string; control: Control<TFieldValues, TContext>; placeholder?: string; disabled?: boolean; className?: string; required?: boolean; };

const DatePickerForm = ({ name, control, label, placeholder, className, required, disabled, }: Props) => { return ( <FormField control={control} name={name} render={({ field }) => { return ( <FormItem className={cn("min-w-[150px] w-full", className)}> {required ? (

        ) : (
          <FormLabel>{label}</FormLabel>
        )}

        <FormControl>
          <Popover>
            <PopoverTrigger asChild>
              <FormControl>
                <Button
                  variant={"outline"}
                  disabled={disabled}
                  className={cn(
                    "w-full pl-3 text-left font-normal",
                    !field.value && "text-muted-foreground"
                  )}
                >
                  {field.value ? (
                    format(field.value, "PPP", { locale: fr })
                  ) : (
                    <span>{placeholder || ""}</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'
                selected={field.value ? field.value : undefined}
                onDayClick={(value) => {
                  if (value) {
                    field.onChange(value);
                  }
                }}
                locale={fr}
                captionLayout='dropdown-buttons'
                fromYear={1960}
                toYear={2030}
              />
            </PopoverContent>
          </Popover>
        </FormControl>
        <FormDescription />
        <FormMessage />
      </FormItem>
    );
  }}
/>

); };

export default DatePickerForm;

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Mac OS

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

shadcn-ui / ui