How to implement vertical scroll using react-dates library?

Question

I'm having a hard time understanding the part of the react-dates documentation where it implements vertical scrolling in the calendar.

DOC: https://react-dates.github.io/react-dates/?path=/story/daypickerrangecontroller--vertical-scrollable

This feature will be used when the page is accessed through mobile devices.

My component

`

import { useState } from "react";
import { DateRangePicker } from "react-dates";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";

function DataPicker() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);
  const handleDatesChange = ({ startDate, endDate }) => {
    setStartDate(startDate);
    setEndDate(endDate);
  };

  const orientation = window.matchMedia("(max-width: 768px)").matches
    ? "vertical"
    : "horizontal";

  const withFullScreenPortal = window.matchMedia("(max-width: 768px)").matches
    ? true
    : false;

  const numberOfMonths = window.matchMedia("(max-width: 768px)").matches
    ? 12
    : 2;

  return (
    <div style={{ display: "flex" }}>
      <DateRangePicker
        startDatePlaceholderText="Start date"
        endDatePlaceholderText="End date"
        showDefaultInputIcon
        orientation={orientation}
        withFullScreenPortal={withFullScreenPortal}
        startDate={startDate}
        startDateId="date-start-date"
        endDate={endDate}
        endDateId="date-end-date"
        onDatesChange={handleDatesChange}
        focusedInput={focusedInput}
        onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
        numberOfMonths={numberOfMonths}
        verticalSpacing={0}
        autoFocus
        // disabled="endDate"
      />
    </div>
  );
}

export default DataPicker;

`