Material UI Pickers - Jalali Calendar Issue

Question

I am using Material-UI pickers in my react app and I am having difficulty getting the Jalali calendar example to work. The version of the packages that I am using is:

"@date-io/jalaali": "^1.3.13",
"@date-io/moment": "^1.3.13",
"@material-ui/core": "^4.8.3",
"@material-ui/icons": "^4.5.1",
"@material-ui/pickers": "^3.2.8",
"moment": "^2.24.0",
"moment-jalaali": "^0.9.1",
"react": "^16.12.0",
"react-scripts": "3.3.0",
"react-dom": "^16.12.0",

The Error is TypeError: utils.getDayText is not a function for DatePicker, TypeError: utils.getHourText is not a function for TimePicker, and TypeError: utils.getYearText is not a function for DateTimePicker. I tried to change the version of some packages but nothing happen.

Edit:

I found that the problem is the JalaliUtils in the <MuiPickersUtilsProvider utils={JalaliUtils} locale="fa">, but still can't find the solution.

import moment from "moment";
import jMoment from "moment-jalaali";
import React, { useState } from "react";
import JalaliUtils from "@date-io/jalaali";

import {
  DatePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

jMoment.loadPersian({ dialect: "persian-modern", usePersianDigits: true });

function PersianExample() {
  const [selectedDate, handleDateChange] = useState(moment());

  return (
    <MuiPickersUtilsProvider utils={JalaliUtils} locale="fa">
      <DatePicker
        clearable
        okLabel="تأیید"
        cancelLabel="لغو"
        clearLabel="پاک کردن"
        labelFunc={date => (date ? date.format("jYYYY/jMM/jDD") : "")}
        value={selectedDate}
        onChange={handleDateChange}
      />
    </MuiPickersUtilsProvider>
  );
}

export default PersianExample;

Answer 1

Strangely the example now is working with the "@date-io/jalaali": "^1.3.12" however, there is not a serious difference between these two versions. Thank you Alex for your sandbox.