MUI pickers + date-fns = TypeError: utils.getYearText is not a function

Question

I am using Material-UI V4, Material-UI Date/Time Pickers and date-fns in a new project. My page is pretty simple and I am using the following DateTimePicker component from Material UI:

            <DateTimePicker
              label="Date and time"
              inputVariant="outlined"
              value={searchDateTime}
              disablePast
              onChange={handleSearchDateTimeChange}
              showTodayButton
              fullWidth
              disabled={isScanning}
            />

Upon clicking the date picker, my app crashes with the following error:

TypeError: utils.getYearText is not a function

How can I fix this?

Versions from package.json

    "@date-io/date-fns": "^2.11.0",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/pickers": "^3.3.10",
    "date-fns": "^2.26.0",
    "next": "10.0.5",
    "react": "17.0.2",
    "react-dom": "17.0.2",

Answer 1

Downgrade @date-io/date-fns from 2.11.0 to 1.3.13.

From the installation guide of Material UI Pickers:

Important: For material-ui-pickers v3 use v1.x version of @date-io adapters.