I need to show calender for available dates in react. For that I have used react-datepicker library as below on my page.

//in state
    availableDates: [
      new Date("2024-08-14"),
      new Date("2024-08-15"),
      new Date("2024-07-16"),
      new Date("2024-09-10"),
    ],

//in long form having multiple field inputs, datepicker is at bottom before submit button
    <DatePicker
      selected={
        new Date(this.state.eventStart)
      }
      onChange={(date) => {
        this.handleEventStartChange(
          date,
          "date"
        );
      }}
      includeDates={this.state.availableDates}
      dateFormat="MM-d-yyyy"
      inline
    />

Due to inline property of datepicker my page is automatically going down when I come to that page. Also if I try to edit each other fields and click outside then also it’s like forcefully going down.

I tried css solutions like overflow: hidden on it’s container div, some other css positioning css but nothing worked. I couldn’t find any property of react-datepicker that will prevent this.

Is there any solution of this problem? Please guide and help. Thanks.