<div
  style={{
    position: "relative",
    overflow: "auto",
    display: "flex",
    justifyContent: "space-around",
    height: "150px",
    maxWidth: "500px",
    backgroundColor: "lightgray",
    borderRadius: "5px",
  }}
>
  <div>
    <h5>Default:</h5>
    <DatePicker />
  </div>
  <div>
    <h5>Portal:</h5>
    <DatePicker portal />
  </div>
</div>

import React, { useEffect, useState } from "react";
import DatePicker from "react-multi-date-picker"

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}
    />
  )
}