is there a way for my React Date Picker to be centred directly below the MUI TextField

enter image description here

I am having some styling issues with the react date picker:

  • I need the date picker to be centred directly below the MUI TextField
  • I need the arrow icon pointing to the text field to be the same color as the header theme.palette.primary.main
const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    fontFamily: theme.typography.fontFamily,
    "& label": {
      transform: "translate(14px, 12px) scale(1)",
      color: theme.palette.text.secondary,
      "&.Mui-focused": {
        color: theme.palette.primary.main,
      },
    },
    "& .react-datepicker": {
      
    },
    "& .react-datepicker__header": {
      backgroundColor: theme.palette.primary.main,
      color: theme.palette.common.white,
      "& button": {
        color: theme.palette.common.white,
      },
    },
    "& .react-datepicker__month-text:hover": {
      backgroundColor: theme.palette.primary.main,
      color: theme.palette.secondary.contrastText,
      cursor: "pointer",
    },
    "& .react-datepicker__year-read-view--down-arrow, 
          & .react-datepicker__month-read-view--down-arrow,
          & .react-datepicker__month-year-read-view--down-arrow,
          & .react-datepicker__navigation-icon::before": {
      borderColor: theme.palette.common.white,
    },
    "& .react-datepicker__input-container": {
      display: "block",
    },
    "& .react-datepicker__input-container > input": {
      display:"none",
      width: "80%",
      padding: theme.spacing(1),
      border: `1px solid ${theme.palette.divider}`,
      borderRadius: theme.shape.borderRadius,
      outline: "none",
      fontSize: theme.typography.fontSize,
      fontFamily: theme.typography.fontFamily,
    },
    "& .react-datepicker__input-container > input:focus": {
      borderColor: theme.palette.primary.main,
    },
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        borderColor: theme.palette.divider,
      },
      "&:hover fieldset": {
        borderColor: theme.palette.divider,
      },
      "&.Mui-focused fieldset": {
        borderColor: theme.palette.primary.main,
        borderWidth: 2,
      },
    },
  },
}));

export default function MonthYearPicker(props) {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <TextField
        id={`date-picker-${name}`}
        label={label}
        variant="outlined"
        type="text"
        value={date.toLocaleString("default", {
          month: "long",
          year: "numeric",
        })}
        style={{
          background: 'white',
          display: 'flex',
          flexFlow: 'column',
          justifyContent: 'center',
          textAlign: 'center',
        }}
      />
      <DatePicker
        selected={date}
        onChange={handleChange}
        dateFormat="MM/yyyy"
        showMonthYearPicker
        ref={datePickerRef} // attach ref to DatePicker
      />
    </div>
  );
}

I tried changing the position of the parent to relative and the position of the date picker to absolute and then translating the x to -50 however that did not work… I am not entirely familiar with the React Date Picker and am only using it because MUI’s month year picker does not work as intended for my version. Thankyou in advance!