Repository: ui
Issue: [bug]: DatePicker form error giving default value null 
Labels: bug

### 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 ? (
              <RequiredFormLabel label={label} />
            ) : (
              <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

```bash
Mac OS
```


### Before submitting

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