MaterialUI / ReactJS: MobileDatePicker not closing after date select - reactjs

Question

Using closeOnSelect on this, but after selecting a date it remains open - only escaping or clicking OK or Cancel buttons does it disappear. I am using this on both desktop and mobile.
<LocalizationProvider dateAdapter={AdapterDateFns}>
<MobileDatePicker
style={{ width: '100%' }}
label={"Date From"}
inputFormat="dd/MM/yyyy"
closeOnSelect={true}
views={['day']}
value={abc}
renderInput={(params) => <TextFields {...params} fullWidth />}
/>
</LocalizationProvider>
How do I make sure this closes after selecting date?

Answer 1

Set disableCloseOnSelect prop to false.
<LocalizationProvider dateAdapter={AdapterDateFns}>
<MobileDatePicker
style={{ width: '100%' }}
label={"Date From"}
inputFormat="dd/MM/yyyy"
disableCloseOnSelect={false}
views={['day']}
value={abc}
renderInput={(params) => <TextFields {...params} fullWidth />}
/>
</LocalizationProvider>
Check codesandbox https://codesandbox.io/s/date-picker-material-ui-forked-so0v14

Answer 2

I made a slight change in your code. I hope it can help you:
you have to add required props for your date picker, e.g. {onChange, value }
datePickers won't accept style as props here
import * as React from "react";
import TextField from "#mui/material/TextField";
import { AdapterDateFns } from "#mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "#mui/x-date-pickers/LocalizationProvider";
import { MobileDatePicker } from "#mui/x-date-pickers/MobileDatePicker";
export default function MaterialUIPickers() {
const [value, setValue] = React.useState<Date | null>(
new Date("2014-08-18T21:11:54")
);
const handleChange = (newValue: Date | null) => {
setValue(newValue);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<MobileDatePicker
label={"Date From"}
inputFormat="dd/MM/yyyy"
value={value}
views={["day"]}
onChange={handleChange}
renderInput={(params) => <TextField {...params} fullWidth />}
/>
</LocalizationProvider>
);
}