Using React-dates' DateRangePicker inside of scrolling container

Question

Is there an easy way to use a DateRangePicker inside of a scrolling div? The problem I am facing is that I have a container div that has overflow-y: scroll set. When you click on the DateRangePicker the calendar that pops up is inside of the scrolling div. This behavior can be seen in this thread: DateRangePicker.

I need that calendar to pop up outside of the div in order to make it usable. In the thread linked above there is talk about using Portals, but I dont want the whole component to be attached to another div. I want only the calendar modal to to put outside of the idv.

Answer 1

One solution I found was to pass the withPortal prop to DateRangePicker. This makes it so that the calendar opens centrally on the screen. More information can be found here: Airbnb React-Dates docs