Как решить эту ошибку Не могу найти утилиты в контексте

Question

Я работаю над Materialui, здесь я пытаюсь отобразить дату и время, но отображается одна ошибка:

Не удается найти утилиты в контексте. Вы либо: а) забыли обернуть дерево компонентов в MuiPickersUtilsProvider; или б) смешанный именной и прямой импорт файлов. Рекомендация: используйте именованный импорт из индекса модуля.

Скажите, пожалуйста, как решить эту ошибку

Это приложение. js

import React, { Fragment, useState } from "react";
import { DateTimePicker } from "@material-ui/pickers";

function BasicDateTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <DateTimePicker
        label="DateTimePicker"
        inputVariant="outlined"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DateTimePicker
        autoOk
        ampm={false}
        disableFuture
        value={selectedDate}
        onChange={handleDateChange}
        label="24h clock"
      />

      <DateTimePicker
        value={selectedDate}
        disablePast
        onChange={handleDateChange}
        label="With Today Button"
        showTodayButton
      />
    </Fragment>
  );
}

export default BasicDateTimePicker;

Answer 1

Попробуйте обернуть его (как в примере: https://material-ui.com/components/pickers/):

import React, { Fragment, useState } from "react";
import DateFnsUtils from '@date-io/date-fns';
import { DateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

function BasicDateTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DateTimePicker
        label="DateTimePicker"
        inputVariant="outlined"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DateTimePicker
        autoOk
        ampm={false}
        disableFuture
        value={selectedDate}
        onChange={handleDateChange}
        label="24h clock"
      />

      <DateTimePicker
        value={selectedDate}
        disablePast
        onChange={handleDateChange}
        label="With Today Button"
        showTodayButton
      />
    </MuiPickersUtilsProvider>
  );
}

export default BasicDateTimePicker;