Merge pull request marmelab#10399 from marmelab/Fix/DateRangeInput_doc_import

Fix `DateRangeInput` doc import

Author: fzaninotto

docs/DateRangeInput.md

@@ -9,14 +9,20 @@ This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon"
 
 ![DateRangeInput](./img/DateRangeInput.png)
 
-**Note**: `<DateRangeInput>` is a wrapper around the [Material UI X Date Range Picker](https://mui.com/x/react-date-pickers/date-range-picker/), which is a MUI X Pro package. This means that you need to own a [MUI X Pro license](https://mui.com/x/introduction/licensing/#pro-plan) to use it.
+**Note**: `<DateRangeInput>` is a wrapper around the [Material UI X Date Range Picker](https://mui.com/x/react-date-pickers/date-range-picker/), which is a MUI X Pro package. This means that you need to own a [MUI X Pro license](https://mui.com/x/introduction/licensing/#pro-plan) to use it and install the package:
+
+```sh
+npm install --save @mui/x-date-pickers-pro
+# or
+yarn add @mui/x-date-pickers-pro
+```
 
 ## Usage
 
 Use `<DateRangeInput>` inside a form component (`<SimpleForm>`, `<TabbedForm>`, `<LongForm>`, etc.) to allow users to pick a start and an end date.
 
 ```tsx
-import { DateRangeInput } from '@react-admin/ra-form-layout';
+import { DateRangeInput } from '@react-admin/ra-form-layout/DateRangeInput';
 import { Edit, SimpleForm } from 'react-admin';
 
 export const EventEdit = () => (
@@ -106,7 +112,7 @@ import {
     SimpleForm,
     TextInput,
 } from "react-admin";
-import { DateRangeInput } from '@react-admin/ra-form-layout';
+import { DateRangeInput } from '@react-admin/ra-form-layout/DateRangeInput';
 
 const requiredValues = dates =>
     !dates || isEmpty(dates[0]) || isEmpty(dates[1])