DatePicker component

import { useState } from 'react';
import { Stack, Text } from '@mantine/core';
import { DatesRangeValue, DateValue, DatePicker } from 'mantine-dates-6';

function Demo() {
  const [singleValue, setSingleValue] = useState<DateValue>(null);
  const [multipleDates, setMultipleDates] = useState<Date[]>([]);
  const [rangeValue, setRangeValue] = useState<DatesRangeValue>([null, null]);

  return (
    <Stack>
      <div>
        <Text mb="sm">
          Pick one value, current value:{' '}
          <b>{singleValue ? `${singleValue.getMonth()}/${singleValue.getFullYear()}` : 'null'}</b>
        </Text>
        <DatePicker value={singleValue} onChange={setSingleValue} />
      </div>

      <div>
        <Text mb="sm">
          Pick multiple values, current value:{' '}
          <b>
            {multipleDates.length > 0
              ? multipleDates.map((item) => `${item.getMonth()}/${item.getFullYear()}`).join(', ')
              : 'empty array'}
          </b>
        </Text>
        <DatePicker type="multiple" value={multipleDates} onChange={setMultipleDates} />
      </div>

      <div>
        <Text mb="sm">
          Pick range, current value:{' '}
          <b>
            {rangeValue.filter((i) => i).length > 0
              ? rangeValue
                  .filter((i) => i)
                  .map((item) => `${item?.getMonth()}/${item?.getFullYear()}`)
                  .join(' – ')
              : 'empty array'}
          </b>
        </Text>
        <DatePicker type="range" value={rangeValue} onChange={setRangeValue} />
      </div>
    </Stack>
  );
}