Date range picker Max date is 30 days from the selected Date in ReactJS

export const MyDateRangePicker = () => {
  const [value, setValue] = useState<DateRange<Date>>([null, null])

  const getMaxDate = (date) => {
    if (!date) {
      return date
    }
    const startTime = new Date(date).getTime()
    const month = date.getMonth();
    const year = date.getFullYear();
    const daysInMonth = new Date(year, month, 0).getDate();
    return new Date(startTime + daysInMonth * 24 * 60 * 60 * 1000)
  }

  const maxDate = React.useMemo(() => getMaxDate(value[0]), [value])

  return(
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DateRangePicker
          startText="Start date"
          endText="End date"
          minDate={new Date()}
          maxDate={maxDate}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(startProps, endProps) => (
            <React.Fragment>
              <TextField {...startProps} />
              <Box sx={{ mx: 2 }}> to </Box>
              <TextField {...endProps} />
            </React.Fragment>
          )}
        />
      </LocalizationProvider>
    )
  }
}