Prime React Calender Positioning Issue

Using primereact calendar for both date & Time selection. code

<Calendar name="enddate"
          id="enddate"
          placeholder="End Time "
          style={{ width: "100%"}}
          inputStyle={{ width: "90%" }}
          showButtonBar={true}
          hideOnDateTimeSelect={true}
          showTime={true}
          showSeconds={true}
          hourFormat="24"
          showIcon={true}
          monthNavigator={true}
          value={this.props.enddate}
          ></Calendar>

output image attached

the problem is that the overlay is covering the input field. I tried a lot, but didn't find any props for showing calendar below the input field. I also tried custom styling but was not successful.

Any Suggestions or updates?