({ date = moment(), onDateChange, ...rest }) => {
    const [stateDate, setDate] = useState(date)

    const handleDateChange = (date) => {
      onDateChange && onDateChange(date)
      setDate(date)
    }

    return (
      <Box display="flex" justifyContent="center">
        <SingleDatePicker
          date={stateDate}
          onDateChange={handleDateChange}
          {...rest}
        />
      </Box>
    )
  }

({ 
    startDate = moment(), 
    endDate = moment().clone().add(3, "days"),
    onDatesChange,
    onFocusChange,
    ...rest
  }) => {

    const START_DATE = "startDate"
    const [dates, setDate] = useState({ startDate, endDate });
    const [focusedInput, setFocusedInput] = useState(START_DATE);

    const handleDatesChange = (nextDates) => {
      onDatesChange && onDatesChange(nextDates);

      setDate(nextDates);
    };

    const handleFocusChange = (nextFocusedInput) => {
      onFocusChange && onFocusChange(nextFocusedInput);

      setFocusedInput(
        nextFocusedInput === null ? START_DATE : nextFocusedInput
      );
    };

    return (
      <Box display="flex" justifyContent="center">
        <DateRangePicker 
          startDate={dates.startDate}
          endDate={dates.endDate}
          onDatesChange={handleDatesChange}
          focusedInput={focusedInput}
          onFocusChange={handleFocusChange}
          {...rest}
        />
      </Box>
    )
  }