import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<div
  style={{
    position: "relative",
    overflow: "auto",
    display: "flex",
    justifyContent: "space-around",
    height: "150px",
    maxWidth: "500px",
    backgroundColor: "lightgray",
    borderRadius: "5px",
  }}
>
  <div>
    <h5>پیش فرض:</h5>
    <DatePicker
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-right"
    />
  </div>
  <div>
    <h5>پورتال:</h5>
    <DatePicker
      portal
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-right"
    />
  </div>
</div>

import React, { useEffect, useState } from "react";
import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  const [portalTarget, setPortalTaget] = useState();

  useEffect(() => {
    const portalDiv = document.createElement("div");
    
    /** 
     * This ID is optional and has been added
     * to better recognize it in the DOM tree.
     */
    portalDiv.id = "myPortalDiv";

    document.body.appendChild(portalDiv);

    setPortalTaget(portalDiv);

    return () => document.body.removeChild(portalDiv);
  }, []);

  return (
    <DatePicker 
      portal 
      portalTarget={portalTarget}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-right"
    />
  )
}