Hello, I am using '@mui/x-date-pickers-pro/DateRangePicker' This is the component I want to use from MUI

import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

export default function BasicDateRangePicker() {
  const [value, setValue] = React.useState([null, null]);

  return (
    <LocalizationProvider
      dateAdapter={AdapterDayjs}
      localeText={{ start: 'Check-in', end: 'Check-out' }}
    >
      <DateRangePicker
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(startProps, endProps) => (
          <React.Fragment>
            <TextField {...startProps} />
            <Box sx={{ mx: 2 }}> to </Box>
            <TextField {...endProps} />
          </React.Fragment>
        )}
      />
    </LocalizationProvider>
  );
}

(let [date-range (r/atom ["" ""])]
                                 (fn []
                                 [localization-provider {:date-adapter   cljs-time-adapter
                                                       :adapter-locale {:start "Check-in" :end "Check-out"}}
                                [stack
                                 [date-range-picker {:value @date-range
                                                     :onChange (fn [value1 value2]
                                                                 (println value1))
                                                     :render-input (react-component [startProps endProps]
                                                                                    [text-field startProps]
                                                                                    [text-field endProps])}]]]))