DateRange fails to load with parameters other than "ranges" when TypeScript enabled

I am using DateRange in my React application. Everything was working fine until I converted my app to use TypeScript. After using TypeScript, the DateRange component only takes ranges as a prop. Here is some information: Package Version: react-date-range: "^1.0.3" React version: react: "^16.9.0", Node version: 12.16.1 Browser: Firefox 75.0

Code in question:

      <DateRange 
                className='experience-date-range'
                editableDateInputs={false}
                ranges={[{
                  "startDate": new Date(startDate),
                  "endDate": new Date(endDate)
                }]}
                months={monthsCount}
                direction='horizontal'
                showMonthArrow={false}
                showMonthAndYearPickers={false}
                dragSelectionEnabled={false}
        />

Here is my error message:

No overload matches this call. Overload 1 of 2, '(props: Readonly): DateRange', gave the following error. Type '{ className: string; editableDateInputs: boolean; ranges: { startDate: Date; endDate: Date; }[]; months: number; direction: string; showMonthArrow: boolean; showMonthAndYearPickers: boolean; dragSelectionEnabled: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'. Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'. Overload 2 of 2, '(props: DateRangeProps, context?: any): DateRange', gave the following error. Type '{ className: string; editableDateInputs: boolean; ranges: { startDate: Date; endDate: Date; }[]; months: number; direction: string; showMonthArrow: boolean; showMonthAndYearPickers: boolean; dragSelectionEnabled: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'. Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'.

In the file: node_modules/@types/react-date-range/index.d.ts If I add the parameters, such as className, to the DateRangeProps interface, things seem to work. However, this is not a solution. See this modification that I made:

export interface DateRangeProps extends Range, CommonCalendarProps {
    /** default: false */
    linkedCalendars?: boolean;
    /** default: 2 */
    calendars?: number;
    /** default: none */
    ranges?: object;
    /** default: false */
    twoStepChange?: boolean;
    /** default: false */
    rangedCalendars?: boolean;
    /** default: none */
    specialDays?: DateContainerType[];
    className: string;
    editableDateInputs: boolean;
    months: number;
    direction: string;
    showMonthArrow: boolean;
    showMonthAndYearPickers: boolean;
    dragSelectionEnabled: boolean;
}

hypeserver / react-date-range

DateRange fails to load with parameters other than "ranges" when TypeScript enabled #363