I’m having an issue with Dayjs and its compatibility with antd’s DatePicker component. I wrap the component inside of a . It looks like this:

// import statements

<ConfigProvider locale={enUS}>
    <DatePicker id="activationDatePicker" value={dayjs(info.dateObject)} disabledDate={calculateCalendarDates} onChange={(val) => handleDateChange(val)} />
</ConfigProvider>

Where info.dateObject is a value I get from Redux:

const info = useSelector((state: RootState) => state.info);

And my redux slice looks like this:

import dayjs from "dayjs";

const initialState = {
    dateObject: dayjs()
    // ...other vars
}

The above code works, most of the time. But occasionally on a page refresh, I will get an entirely blank screen with the error “date.locale is not a function” coming from the inside of the date picker component. Other times, I get strange errors on the page that look like this, NaN and “invalid date”:

So my question is: is this how I should initialize dayjs in redux? If I use null, it returns the same errors every single time, but initializing it as dayjs() seems to partially mitigate those errors. I’ve also tried providing DatePicker’s “value” prop with just info.dateObject, but this also produces more errors than it resolves, so I wrapped it inside of another dayjs(). Happy to provide more details if necessary. Thanks.