DatePicker

const formSchema = z.object({
        startDate: z.date({
            error: issue => (issue.input === undefined ? "Required" : "Invalid date"),
        }),
        eventPeriod: z.object(
            {
                start: z.date({
                    error: issue => (issue.input === undefined ? "Required" : "Invalid date"),
                }),
                end: z.date({
                    error: issue => (issue.input === undefined ? "Required" : "Invalid date"),
                }),
            },
            { message: "Both start and end date are required" }
        ),
    });

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            startDate: undefined,
            eventPeriod: undefined
        },
    });

    function onSubmit(data: z.infer<typeof formSchema>) {
        toast("You submitted the following values", {
            description: (
                <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
                    <code className="text-white">{JSON.stringify(data, null, 2)}</code>
                </pre>
            ),
        });
    }

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
    <DatePickerForm
      control={form.control}
      name="startDate"
      label="Start Date"
      placeholder="Pick a date"
      isRequired
    />
    <Button type="submit">Submit</Button>
  </form>
</Form>