Как настроить средство выбора диапазона дат в пользовательском интерфейсе материала

Question

Я использую MobileDateRangePicker из "@material-ui / lab / MobileDateRangePicker". Я пытаюсь настроить его под свои нужды. Я ищу

1. Когда страница загружает только кнопку для отображения, и мне не нужно сначала показывать текстовые поля. когда мы нажимаем кнопку, MobileDateRangePicker должен быть открыт. Я использовал открытый атрибут в MobileDateRangePicker. Дело в том, что кнопки отмены и ОК внутри MobileDateRangePicker не работают, когда я использую атрибут open . Если я удалю текстовые поля в renderInput, чтобы отображалась только кнопка при загрузке страницы, представление ввода текста будет отсутствовать после открытия календаря. Как заставить кнопки работать без отображения текстовых полей.

2. Когда открывается MobileDateRangePicker, мне нужно сначала отобразить представление ввода текста, а затем, когда я нажимаю на значок календаря, должно появиться представление календаря . Но сейчас происходит полная противоположность. Как я могу получить свое требование.

Это полный код. Любая помощь была бы мне очень полезна. Спасибо.

      import * as React from "react";
import TextField from "@material-ui/core/TextField";
import AdapterDateFns from "@material-ui/lab/AdapterDateFns";
import LocalizationProvider from "@material-ui/lab/LocalizationProvider";
import Box from "@material-ui/core/Box";
import Stack from "@material-ui/core/Stack";
import MobileDateRangePicker from "@material-ui/lab/MobileDateRangePicker";
import { Button } from "@material-ui/core";

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

  const [openPicker, setOPenPicker] = React.useState(false);

  const handleClick = () => {
    setOPenPicker(!openPicker);
  };

  return (
   <div>
     <Button
      onClick={handleClick}
      variant="outlined"
      style={{ marginBottom: "20px" }}
     >
       open calender
     </Button>

     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <Stack spacing={3}>
        <MobileDateRangePicker
          startText="Start date"
          endText="End date"
          disableMaskedInput={true}
          open={openPicker}
          // disableOpenPicker={true}
          showDaysOutsideCurrentMonth={true}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          toolbarTitle="custom date range"
          renderInput={(startProps, endProps) => (
            <React.Fragment>
              <TextField {...startProps} />
              <Box sx={{ mx: 2 }}> to </Box>
              <TextField {...endProps} />
            </React.Fragment>
          )}
        />
      </Stack>
    </LocalizationProvider>
  </div>
  );
}

ссылка на песочницу: https://codesandbox.io/s/responsivedaterangepicker-material-demo-forked-8qws4?file=/demo.js