I have a project using NextJS, Tailwind and NextUI.
I am trying to create a Date Picker customized component.
The NextUI documentation is showing how to set a value on the picker via code using @internationalized/date.

However, I’d like to use date-fns instead.

This is my current Date Picker component.

"use client";

import React from "react";
import { DatePicker } from "@nextui-org/react";
import { startOfToday } from "date-fns";

interface Props {
    label?: string;
}

export function Date({ label }: Props) {
    const today = startOfToday();

    return (
        <DatePicker
            label={label}
            variant="bordered"
            onChange={date => console.log(date)}
            value={today}
        />
    );
}

This is the error that I see:

Type ‘Date’ is not assignable to type ‘DateValue | null | undefined’.
Type ‘Date’ is missing the following properties from type ‘ZonedDateTime’: #private, calendar, era, year, and 16 more.ts(2322)`
inputs.d.ts(67, 3): The expected type comes from property ‘value’ which is declared here on type ‘IntrinsicAttributes & Props & { ref?: Ref | undefined; }’

I also tried this: const today = new Date("2024-01-01");

I also tried this: const today = format(startOfToday(), "yyyy-MM-dd");

Is there a way to do that without using @internationalized/date?