Usage

As mentioned in the previous section, the initial value can be Date, DateObject, Number, or String, but as soon as the user selects a new date, its type changes to DateObject.

So, if you want to store the selected dates in the state, depending on the type of the initial value; You must add the initial value type plus DateObject and Dateobject[] type, to useState:

import React, { useState } from "react";
import DatePicker, { DateObject } from "react-multi-date-picker"
import type{Value} from "react-multi-date-picker"

export default function Example() {
  const [value, setValue] = useState<Value>(new Date());

  return <DatePicker value={value} onChange={setValue} />;
}

Adding Ref to Calendar & DatePicker

import React, { useRef } from "react";
import DatePicker, { Calendar, CalendarRef, DatePickerRef } from "react-multi-date-picker"

export default function Example() {
  const calendarRef = useRef<CalendarRef>();
  const datepickerRef = useRef<DatePickerRef>();

  return (
    <>
      <Calendar ref={calendarRef} />
      <DatePicker ref={datepickerRef} />
    </>
  )
}