Estoy usando el paquete de fechas de reacción de airbnb, y estoy usando el componente DateRangePicker de esta biblioteca. Quiero mostrar el selector de fecha en pantalla completa vericalmente como se muestra en la imagen de abajo

Ahora, mi pregunta es cómo podemos mostrar este componente dateRangePicker en la pantalla móvil con pantalla completa verticalmente.

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

Sandbox de código de demostración es Codesandbox