I'm currently utilizing the MUI date range picker from https://mui.com/x/react-date-pickers/date-range-picker/. Here's my code snippet:
<StaticDateRangePickerStyled
displayStaticWrapperAs="desktop"
value={value}
onChange={handleDatePickerChange}
renderDay={(
date,
dateRangePickerDayProps: DateRangePickerDayProps<dateFns>
) => <DateRangePickerDayStyled {...dateRangePickerDayProps} />}
dayOfWeekFormatter={(day: string) => dayOfWeek[day]}
components={{
LeftArrowButton: ({ onClick }) => (
<IconButton
size="md"
Icon={ArrowBackStyled}
onClick={onClick}
/>
),
RightArrowButton: ({ onClick }) => (
<IconButton
size="md"
Icon={ArrowForwardStyled}
onClick={onClick}
/>
),
}}
/>
Furthermore, this is my handler function:
const handleDatePickerChange = useCallback((newValue: DateRange<dateFns>) => {
setValue(newValue)
}, [])
However, TypeScript is throwing an error:
Type '(newValue: DateRange<dateFns>) => void' is not assignable to type '(date: DateRange<unknown>, keyboardInputValue?: string | undefined) => void'.
Are you able to spot what I might be overlooking?