react-datepicker anchorDirection="bottom" not working

I am using react-datepicker to display a time picker component but I want the time list to be displayed in the bottom of input component but it's currently showing on top of the input field.

code :

<DatePicker
    selected={end_time}
    onChange={(date) => {
        setEndtime(date);
    }}
    showTimeSelect
    showTimeSelectOnly
    timeIntervals={30}
    timeCaption="Time"
    dateFormat="h:mm aa"
    minTime={moment().toDate()}
    maxTime={moment().endOf("day").toDate()}
    anchorDirection="bottom"
/>

Problem screenshot

Found a workaround

<DatePicker
                  selected={end_time}
                  onChange={(date) => {
                    setTime(date);
                  }}
                  showTimeSelect
                  showTimeSelectOnly
                  timeIntervals={30}
                  timeCaption="Time"
                  dateFormat="h:mm aa"
                  minTime={moment().toDate()}
                  maxTime={moment().endOf("day").toDate()}
                  popperPlacement="bottom-start"
                  popperProps={{
                    positionFixed: true,
                  }}
                  popperModifiers={[
                    {
                      name: "preventOverflow",
                      options: {
                        altAxis: true,
                        altBoundary: true,
                        tether: false,
                      },
                    },
                    {
                      name: "flip",
                      options: {
                        fallbackPlacements: [],
                      },
                    },
                    {
                      name: "offset",
                      options: {
                        offset: [0, 0],
                      },
                    },
                  ]}
                />