Using react-dates with Typescript

I am trying to use react-dates with Typescript, but cannot figure out how to define the types.

The following TS/React code is giving the error

Argument of type '"startDate" | "endDate" | null' is not assignable to parameter of type 'SetStateAction'. Type '"startDate"' is not assignable to type 'SetStateAction'.

My code is based on this, is there a simplier way to write this code? Thank you!

import React, { useState } from 'react';

import moment from 'moment';
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { DateRangePicker } from 'react-dates';

interface IHandleDatesChange {
    startDate: moment.Moment | null,
    endDate: moment.Moment | null,
}

export function Foo(): JSX.Element {
    const [ startDate, setStartDate ] = useState<moment.Moment | null>(moment('1990-01-01'));
    const [ endDate, setEndDate ] = useState<moment.Moment | null>(moment(moment().endOf('year')));
    const [ focusedInput, setFocusedInput ] = useState(null);

    const handleDatesChange = ({ startDate, endDate}: IHandleDatesChange) => {
        setStartDate(startDate);
        setEndDate(endDate);
    }

    return (
        <DateRangePicker
            startDate={startDate}
            startDateId='daterangepicker_start_date'
            endDate={endDate}
            endDateId='daterangepicker_end_date'
            onDatesChange={handleDatesChange}
            focusedInput={focusedInput}
            onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}   // <== ERROR OCCURS
        />
    )
}

yarn.lock

react-dates@^21.8.0:
  version "21.8.0"
  resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.8.0.tgz#355c3c7a243a7c29568fe00aca96231e171a5e94"
  integrity sha512-PPriGqi30CtzZmoHiGdhlA++YPYPYGCZrhydYmXXQ6RAvAsaONcPtYgXRTLozIOrsQ5mSo40+DiA5eOFHnZ6xw==
  dependencies:
    airbnb-prop-types "^2.15.0"
    consolidated-events "^1.1.1 || ^2.0.0"
    enzyme-shallow-equal "^1.0.0"
    is-touch-device "^1.0.1"
    lodash "^4.1.1"
    object.assign "^4.1.0"
    object.values "^1.1.0"
    prop-types "^15.7.2"
    raf "^3.4.1"
    react-moment-proptypes "^1.6.0"
    react-outside-click-handler "^1.2.4"
    react-portal "^4.2.0"
    react-with-direction "^1.3.1"
    react-with-styles "^4.1.0"
    react-with-styles-interface-css "^6.0.0"

...

"@types/react-dates@^21.8.1":
  version "21.8.1"
  resolved "https://registry.yarnpkg.com/@types/react-dates/-/react-dates-21.8.1.tgz#f90b30895e22d15f42c64be6bbafb1796b5f05f8"
  integrity sha512-zgBf0SM6dcDPR29x3bCzSypK0c2+EKDkR4NNyBCwH2GyL/AgIvJ0bQ6n2z1s468SXS2QbzCMJtF831vG7iGkjg==
  dependencies:
    "@types/react" "*"
    "@types/react-outside-click-handler" "*"
    moment "^2.26.0"

...

moment@>=1.6.0, moment@^2.26.0, moment@^2.29.1:
  version "2.29.1"
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==

Edit:

You haven't passed a type to your focusedInput state. If you check the @types/react-dates definitions, the onFocusChange prop expects the callback argument to be a specific type: FocusedInputShape which is a string union 'startDate' | 'endDate'.

To fix, update your state init:

const [ focusedInput, setFocusedInput ] = useState<FocusedInputShape | null>(null);

Original answer:

I seem to recall hitting this issue (or very similar) before and it turned out to be a moment version mismatch between the dependency installed in my project and the dependency installed by react-dates.

Check which versions are installed and if they do not match, up-/down-grade your project version if you can to see if it makes a difference.