show react-dates airbnb daterangepicker in mobile screen vertically fullscreen

Question

I am using react-dates package from airbnb, and I am using DateRangePicker component of this library. I want to show datepicker verically fullscreen as shown in below image

Now, My question is how can we show this dateRangePicker component in mobile screen with vertically fullscreen.

import React, { useState } from "react";
import { DateRangePicker } from "react-dates";
 
export const Datepicker = () => {
 const [startDate, setStartDate] = useState();
 const [endDate, setEndDate] = useState();
 const [focusedInput, setFocusedInput] = useState();

return (
  <div>
   <h1> Date </h1>{" "}
   <p> selected start Date is : {JSON.stringify(startDate)} </p>
   <p> selected end Date is : {JSON.stringify(endDate)} </p>
    {window.matchMedia("(max-width: 700px)").matches && (
     <DateRangePicker
       orientation="vertical"
       numberOfMonths={1}
       verticalHeight={800}
       startDate={startDate}
       startDateId="start-date"
       endDate={endDate}
       endDateId="end-date"
       onDatesChange={({ startDate, endDate }) => {
        setStartDate(startDate);
        setEndDate(endDate);
       }}
       focusedInput={focusedInput}
        onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
     />
   )}
   </div>
 )

Demo code sandbox is Codesandbox