I have to say that adjusting the position of the calendar in the datepicker involved me so much that I had to write a separate package for it! But I still can not claim that it works 100%, if you have a problem with the calendar position, you can open an issue here.

In the early versions, I used the relative position for the datepicker container, which is easy and does not require calculations, but gradually it became clear that the relative position doesn't work, it may be suitable for some layouts, but it doesn't work for complex layouts.

For this reason, in later versions, I changed the position of the container to static, trying to determine the position of the calendar with JavaScript calculations. Computations became more and more complicated and I finally decided to transfer them all to Element Popper package so that it could be used in other projects as well.

The way of specifying the position of the calendar is that you have to define the two main and relative positions as 'main position-relative position' for the datepicker, the main position has been defined to specify where the calendar should be placed, which You can consider four up, down, left and right values. The relative position is also used to determine where the calendar should be in the main position. Which itself consists of three parts: start, center, and end.

there are all the values you can define for a datepicker as position below:

const containerRef = useRef()
const datePickerRef = useRef()

const [state, setState] = useState({
  mainPosition: "bottom",
  relativePosition: "center",
  fixMainPosition: false,
  fixRelativePosition: false,
  offsetY: 0,
  offsetX: 0
})

const updateState = (key, value) => setState({ 
  ...state, 
  [key]: value
})

useEffect(() => {
  containerRef.current.scrollTo(
    (containerRef.current.clientWidth),
    (containerRef.current.clientHeight / 2)
  )

  datePickerRef.current.openCalendar()
}, [])

const {
  mainPosition,
  relativePosition,
  fixMainPosition,
  fixRelativePosition,
  offsetY,
  offsetX
} = state
.
.
.
<div>
  <div 
    style={{ 
      display: "flex", 
      justifyContent: "space-around",
      flexWrap: "wrap",
      margin: "10px 0" 
    }}
  >
    <label>
      Main Position:
      <select
        value={mainPosition}
        onChange={e => updateState("mainPosition", e.target.value)}
        className="select"
      >
        <option value="top">top</option>
        <option value="bottom">bottom</option>
        <option value="left">left</option>
        <option value="right">right</option>
      </select>
    </label>
    <label>
      <input
        type="checkbox"
        value={fixMainPosition}
        onChange={e => updateState("fixMainPosition", e.target.checked)}
      />
      Fix Main Position
    </label>
    <label>
      Relative Position:
      <select
        value={relativePosition}
        onChange={e => updateState("relativePosition", e.target.value)}
        className="select"
      >
        <option value="start">start</option>
        <option value="center">center</option>
        <option value="end">end</option>
      </select>
    </label>
    <label>
      <input
        type="checkbox"
        value={fixRelativePosition}
        onChange={e => updateState("fixRelativePosition", e.target.checked)}
      />
      Fix Relative Position
    </label>
    <label>
      Offset Y:
      <input
        type="number"
        className="input"
        style={{ width: "30px" }}
        value={offsetY}
        onChange={e => updateState("offsetY", Number(e.target.value))}
      />
    </label>
    <label>
      Offset X:
      <input
        type="number"
        className="input"
        style={{ width: "30px" }}
        value={offsetX}
        onChange={e => updateState("offsetX", Number(e.target.value))}
      />
    </label>
  </div>
  <div
    ref={containerRef}
    style={{ 
      backgroundColor: "whitesmoke", 
      height: "500px", 
      overflow: "auto", 
      position: "relative",
      borderRadius: "5px",
      boxShadow: "inset 0 0 6px 0 #888" 
    }}
  >
    <div
      style={{ 
        width: "300%", 
        height: "200%", 
        display: "flex", 
        flexDirection: "column", 
        justifyContent: "center" 
      }}
    >
      <DatePicker
        ref={datePickerRef}
        containerStyle={{ //datepicker container style
          width: "180px",
          margin: "auto"
        }}
        style={{ //input style
          width: "100%",
          height: "26px",
          boxSizing: "border-box"
        }}
        calendarPosition={`${mainPosition}-${relativePosition}`}
        fixMainPosition={fixMainPosition}
        fixRelativePosition={fixRelativePosition}
        offsetY={offsetY}
        offsetX={offsetX}
        onClose={() => false}
      />
    </div>
  </div>
</div>

There are two other examples that are related to the position of the calendar that you may want to see: