Custom wrapped daypicker component, Issue with Typescript

[BuhayovA]

I want to create a custom reusable component based on the react-day-picker library. However, I am having issues with typing. When I try to create a wrapper component around the DayPicker from the library and define all the multi-types, I encounter an error of this kind. How can I correctly type this? I will attach screenshots of the my types below.

import React from 'react'
import {
  DateRange,
  DayPicker,
  DayPickerMultipleProps,
  DayPickerRangeProps,
  DayPickerSingleProps,
} from 'react-day-picker'

export interface PickDateFieldProps {
  ...
}

export interface DayPickerMultipleProps extends PickDateFieldProps {
  mode: 'multiple'
  selected?: Date[]
  onSelect?: (days?: Date[]) => void
}

export interface DayPickerSingleProps extends PickDateFieldProps {
  mode: 'single'
  selected?: Date
  onSelect?: (day?: Date) => void
}

export interface DayPickerRangeProps extends PickDateFieldProps {
  mode: 'range'
  selected?: DateRange
  onSelect?: (range?: DateRange) => void
}

export type DatePickerProps = DayPickerMultipleProps | DayPickerSingleProps | DayPickerRangeProps

const TestDatePicker: React.FC<DatePickerProps> = ({
  selected,
  mode,
  ...other
}) => {
  // ...
  return (
    <DayPicker
      mode={mode}
      selected={selected}
      {...other}
    />
  )
}

export default TestDatePicker

[BuhayovA]

And of course in future i need to wrapped this component using react-hook-form.

[gpbl]

A fix will be available in the next mayor version.
Closing a Duplicate of #1570