How to solve this error Can not find utils in context

Question

I am working on Materialui, here I am trying to display date and time but it is showing one error that is

Can not find utils in context. You either a) forgot to wrap your component tree in MuiPickersUtilsProvider; or b) mixed named and direct file imports. Recommendation: use named imports from the module index.

Please tell me how to solve this error

This is App.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

Try wrapping it (like in the example: 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;