This package as a functional component, uses forwardRef for passing a ref through a component.

import React, { useRef } from "react"
import { Calendar } from "react-multi-date-picker"

export default function Example() {
  const calendarRef = useRef()

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

The openCalendar and closeCalendar functions are added to the ref by date picker, and the refreshPosition is added to the ref by element popper.

The isOpen property is also added to the ref by the datepicker.

If you want to manually open and close the calendar, you can use the openCalendar and closeCalendar functions as follows.

const datePickerRef = useRef()
.
.
.
<div>
  <button
    onClick={() => datePickerRef.current.openCalendar()}
  >
    open
  </button>
  <DatePicker 
    ref={datePickerRef} 
  >
    <button
      style={{ margin: "5px" }}
      onClick={() => datePickerRef.current.closeCalendar()}
    >
      close
    </button>
  </DatePicker>
</div>

When the calendar may be open and the input position changes, the calendar position remains constant because the element-popper does not listen to the click events.

In these cases, you can use the refreshPosition function, which is located in the date picker ref.

const ref = useRef()
const ref2 = useRef()
const [visible, setVisible] = useState(false)
const [visible2, setVisible2] = useState(false)
const [shouldCloseCalendar, setShouldCloseCalendar] = useState(false)
const [shouldCloseCalendar2, setShouldCloseCalendar2] = useState(false)
.
.
.
<div>
  <h2>Example 1 (without using refresh position) :</h2>
  {visible && <span>a demo text to force the datepicker to move forward!</span>}
  <DatePicker
    value={{}}
    placeholder="first click here"
    ref={ref}
    onOpen={() => setShouldCloseCalendar(false)}
    onClose={() => shouldCloseCalendar}
  />
  <button
    onClick={() => {
      if (!visible) {
        setVisible(true)
      } else {
        setVisible(false)
        setShouldCloseCalendar(true)
        setTimeout(() => {
          ref.current.closeCalendar()
        }, 20);
      }
    }}
  >
    {visible ? "refresh and close calendar" : "then click here"}
  </button>
  <h2>Example 2 (with using refresh position) :</h2>
  {visible2 && <span>a demo text to force the datepicker to move forward!</span>}
  <DatePicker
    value={{}}
    placeholder="first click here"
    ref={ref2}
    onOpen={() => setShouldCloseCalendar2(false)}
    onClose={() => shouldCloseCalendar2}
  />
  <button
    onClick={() => {
      if (!visible2) {
        setVisible2(true)
        setTimeout(() => {
          ref2.current.refreshPosition()
        }, 20);
      } else {
        setVisible2(false)
        setShouldCloseCalendar2(true)
        setTimeout(() => {
          ref2.current.closeCalendar()
        }, 20);
      }
    }}
  >
    {visible2 ? "refresh and close calendar" : "then click here"}      
  </button>
</div>

Example 1 (without using refresh position) :

Example 2 (with using refresh position) :

There is a way to manually set the month and year in the Calendar which is shown in the example below.

Just note that this feature only works on Calendar.

Click here to manually set the month and year in DatePicker

import React, { useRef, useState } from "react";
import { Calendar, DateObject } from "react-multi-date-picker";

export default function Example() {
  const [date, setDate] = useState(new DateObject());

  const calendarRef = useRef();

  function update(key, value) {
    let date = calendarRef.current.date;

    calendarRef.current.set(key, date[key] + value);

    setDate(new DateObject(date));
  }

  const style = {
    display: "inline-block",
    width: "90px",
    fontSize: "16px",
  };

  return (
    <div style={{ textAlign: "center" }}>
      <div>
        <button onClick={() => update("month", 1)}>+</button>
        <span style={style}>{date.month.name}</span>
        <button onClick={() => update("month", -1)}>-</button>
      </div>
      <div>
        <button onClick={() => update("year", 1)}>+</button>
        <span style={style}>{date.year}</span>
        <button onClick={() => update("year", -1)}>-</button>
      </div>
      <Calendar 
        ref={calendarRef}
      />
    </div>
  )
}