type error for startDate and endDate props

[SergeyKazarinov]

I use selectsRange props. If I pass startDate and endDate props, I get a type error because it expects Date or undefined type. However, the initial state for startDate and endDate is null. However, for a normal state (without selectsRange), the null type does not throw a type error.

Example

const DateInput = () => {
  const [rangeDate, setRangeDate] = useState<[Date | null, Date | null]>([
    null,
    null,
  ]);
  const [startDate, endDate] = rangeDate;
  return (
    <DatePicker
      id="datePickerRange"
      selectsRange
      startDate={startDate}
      endDate={endDate}
      onChange={(dates: [Date | null, Date | null]) => {
        setRangeDate(dates);
      }}
    />
  );
};

export default DateInput;

I can solve this problem by adding undefined to the props, but it's not the best solution

const DateInput = () => {
  const [rangeDate, setRangeDate] = useState<[Date | null, Date | null]>([
    null,
    null,
  ]);
  const [startDate, endDate] = rangeDate;
  return (
    <DatePicker
      id="datePickerRange"
      selectsRange
      startDate={startDate ?? undefined}
      endDate={endDate ?? undefined}
      onChange={(dates: [Date | null, Date | null]) => {
        setRangeDate(dates);
      }}
    />
  );
};

export default DateInput;