React DatePicker calendar showing behind table head

It's because of Material-UI Paper component styles. Paper component has an overflow: hidden style, and by removing it works perfectly.

import Card from "@material-ui/core/Card";
...
<Card>
<DayPickerInput  id="servdate" name="servdate"  dateFormat="yyyy-mm-dd"/>
</Card>

In style set .MuiCard-root{ overflow: visible!important; }

Try setting the z-index on .react-datepicker-popper instead of on datepicker. That's the className that react-date-picker uses on the popup it creates.

.react-datepicker-popper {
    z-index: 9999 !important;
}