Antd + Dayjs: TypeError: clone.weekday is not a function

Question

I upgraded the Ant Design version from 4 to 5 and replaced Moment with Day.js, then encountered this error.

const {
    field,
    fieldState: { error },
  } = useController({ name: name, control: control });

  return (
    <div>
      <RangePicker
        style={error ? errorStyle : defaultStyle}
        format={customFormatList}
        suffixIcon={<BsCalendarDate className="text-lg" />}
        value={field.value}
        onChange={(e) => {
          field.onChange(e);
        }}
        onBlur={() => {
          field.onBlur();
        }}
        onCalendarChange={(e) => {
          field.onChange(e);
        }}
        {...rest}
      />
      {error && <p className="text-sm text-[#ff4d4f]">{error.message}</p>}
    </div>
  );

Then, I set default value with react-hook-form:

 const { control, handleSubmit, setValue, watch } = useForm<SearchFormInputValues>({
    defaultValues: {
      requestDate: [dayjs(), dayjs()],
    },
    resolver: yupResolver(schema),
  });

...
<DateRangePicker
   name="requestDate"
   control={control}
   placeholder={["dd-mm-yyyy", "dd-mm-yyyy"]}/>

It displays the correct date I need, but when I click to edit, an error occurs above. When I click the delete button next to it and select the date again, there will be no error.

I tried to fix this error by adding the following lines of code, but it's not working:

import dayjs from "dayjs";
import weekday from "dayjs/plugin/weekday";
import localeData from "dayjs/plugin/localeData";

dayjs.extend(weekday);
dayjs.extend(localeData);
dayjs.locale("en");
dayjs.locale("vi");

Answer 1

import * as dayjs from 'dayjs'
import * as isLeapYear from 'dayjs/plugin/isLeapYear' // import plugin
import 'dayjs/locale/zh-cn' // import locale

dayjs.extend(isLeapYear) // use plugin
dayjs.locale('zh-cn') // use locale

I think it help you Could you add code into file index.tsx or index.js of root app