How can i add Preset Ranges in MUI 5 date picker range

I am using MUI 5 date picker range my task is I need to add Preset Ranges in the place of the footer in the date range picker if any way we can do it so I need to add that in my MUI date picker if I click on that any range that date picker date will change accordingly

                ranges={{
                  Yesterday: [
                    moment().subtract(1, "day").startOf("day"),
                    moment().endOf("day"),
                  ],
                  Today: [
                    moment().startOf("day"),
                    moment().add(1, "day").endOf("day"),
                  ],
                  "Last Week": [
                    moment().subtract(1, "week").startOf("isoWeek"),
                    moment().subtract(1, "week").endOf("isoWeek"),
                  ],
                  "Last Month": [
                    moment().subtract(1, "month").startOf("month"),
                    moment().subtract(1, "month").endOf("month"),
                  ],
                  "This Month": [
                    moment().startOf("month"),
                    moment().endOf("month"),
                  ],
                  "Last Year": [
                    moment().subtract(1, "year").startOf("year"),
                    moment().subtract(1, "year").endOf("year"),
                  ],
                  "This Year": [
                    moment().startOf("year"),
                    moment().endOf("year"),
                  ],
                }}
export default function BasicDateRangePicker() {
  const [value, setValue] = React.useState([null, null]);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangePicker
        startText="Check-in"
        endText="Check-out"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(startProps, endProps) => (
          <React.Fragment>
            <TextField {...startProps} />
            <Box sx={{ mx: 2 }}> to </Box>
            <TextField {...endProps} />
          </React.Fragment>
        )}
      />
    </LocalizationProvider>
  );
}

I need like this

CodeSandBox Link