How can I transform this DataPicker into DataRangePicker of Material UI? - reactjs

Question

I've tried some imports but doesn't have much idea how to implement
<form className={classes.formContainer} noValidate autoComplete="off">
<div className={classes.formContent}>
<div className={classes.fieldsContent}>
<TextField
id="search-name-enrollment"
placeholder="Buscar por nome ou número de matrícula"
className={clsx(classes.field, classes.fieldNameEnroll)}
value={nameEnrollment}
onChange={(event) => handleNameEnrollmentChange(event.target.value)}
InputProps={{
disableUnderline: true,
classes: { input: classes.placeholder },
startAdornment: (
<InputAdornment position="start">
<SearchIcon color="primary" />
</InputAdornment>
)
}}
/>
</div>
<Link
component="button"
type="button"
variant="body2"
color="primary"
underline="none"
className={classes.linkFiltros}
onClick={() => {
setOpenFilters(!openFilters)
}}
>
Mais filtros
{openFilters ? (
<KeyboardArrowUpIcon fontSize="small" />
) : (
<KeyboardArrowDownIcon fontSize="small" />
)}
</Link>
<Collapse
in={openFilters}
classes={{
wrapper: classes.wrapper
}}
className={classes.fieldsContent}
timeout="auto"
unmountOnExit
>
<div className={classes.secundaryFieldContent}>
<div className={classes.secundaryField}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="dd/MM/yyyy"
margin="normal"
id="date-picker-inline"
placeholder="Data de matrícula"
value={dateEnrollment}
onChange={handleDateEnrollmentChange}
className={clsx(classes.field, classes.dates)}
invalidDateMessage=""
InputProps={{
disableUnderline: true,
classes: { input: classes.placeholder }
}}
KeyboardButtonProps={{
'aria-label': 'change date'
}}
/>
</MuiPickersUtilsProvider>
</div>
<div
className={clsx(
classes.secundaryField,
classes.secundaryFieldMarginL
)}
>
<Autocomplete
multiple
limitTags={1}
id="checkboxes-tags-demo"
options={options}
disableCloseOnSelect
value={status}
onChange={handleStatusChange}
getOptionLabel={(option) => option.label}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.label}
</React.Fragment>
)}
renderInput={(params) => (
<TextField
{...params}
className={clsx(classes.field, classes.status)}
placeholder="Status de matrícula"
classes={{ root: classes.underline }}
/>
)}
/>
</div>
</div>
</Collapse>
</div>
</form>
I would like to know how to transform into to DataRangePicker, you guys can help me?
I've tried already some imports and similiar ones, but at all not having a full idea how to implement it. This model that I have already developed just is one date, I would like to have a calendar that I can choose a range as well.