The types of 'inputDateFormatProp.year' are incompatible between these types.

[abisao1]

Why am I getting this error: Type '{ title: string; autoHide: boolean; todayBtn: boolean; clearBtn: boolean; clearBtnText: string; maxDate: Date; minDate: Date; theme: { background: string; todayBtn: string; clearBtn: string; ... 6 more ...; previousBtn: string; }; ... 9 more ...; inputDateFormatProp: { ...; }; }' is not assignable to type 'IOptions'. The types of 'inputDateFormatProp.year' are incompatible between these types. Type 'string' is not assignable to type '"numeric" | "2-digit" | undefined'.ts(2322) DatePicker.d.ts(6, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & IDatePickerProps'

Here is my code:

'use client'

import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"; import { useState } from "react"; import Datepicker from "tailwind-datepicker-react" import { FormField } from "./form";

const options = { title: "Date Picker", autoHide: true, todayBtn: false, clearBtn: false, clearBtnText: "Clear", maxDate: new Date("2030-01-01"), minDate: new Date("1950-01-01"), theme: { background: "bg-white dark:bg-gray-800", todayBtn: "", clearBtn: "", icons: "", text: "", disabledText: "bg-grey-500", input: "", inputIcon: "", selected: "", previousBtn: "p-0" }, icons: { // () => ReactElement | JSX.Element prev: () => , next: () => , }, datepickerClassNames: "top-12", defaultDate: new Date("2022-01-01"), language: "en", disabledDates: [], weekDays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], inputNameProp: "date", inputIdProp: "date", inputPlaceholderProp: "Select Date", inputDateFormatProp: { year: "numeric", month: "numeric", day: "numeric", } }

const DatePicker = () => { const [show, setShow] = useState(false); const [selectedDate, setSelectedDate] = useState<Date | null>(null); const handleChange = (selectedDate: Date) => { setSelectedDate(selectedDate) console.log(selectedDate) } const handleClose = (state: boolean) => { setShow(state) }

return (
    <div>
        <Datepicker options={options} onChange={handleChange} show={show} setShow={handleClose}>
            <div className="...">
                <FormField name='' type="text" className="..." placeholder="Select Date" value={selectedDate?.toString()} onFocus={() => setShow(true)} readOnly />
            </div>
        </Datepicker>
    </div>
)

}

export default DatePicker;