I work on the material ui Date Range Picker and by doing this code nothing is displayed on the screen I can't understand where the problem comes from

Question

I work on the material ui Date Range Picker and by doing this code nothing is displayed on the screen I can't understand where the problem comes from

import "./date.css"
import { LocalizationProvider } from "@mui/lab"
import AdapterdateFns from "@mui/lab/AdapterDateFns"
import { Box, TextField } from "@mui/material"
import { DateRangePicker } from "@mui/lab"
import { useState } from "react"

const Date = () => {
  const [value, setValue] = useState([null, null])
  console.log(value)
  return (
    <div className="date">
      <div className="datePicker">
        <LocalizationProvider dateAdapter={AdapterdateFns}>
          <Box width="500px">
            <DateRangePicker
              startText="arriver"
              endText="depart"
              value={value}
              onChange={(newValues) => {
                setValue(newValues)
              }}
              renderInput={(startProps, endProps) => (
                <>
                  <TextField {...startProps} />
                  <Box sx={{ mx: 2 }}>à</Box>
                  <TextField {...endProps} />
                </>
              )}
            />
          </Box>
        </LocalizationProvider>
      </div>
    </div>
  )
}
export default Date