Кнопка закрытия DialogTitle выровнена по блокам, а не встроена

Question

Я столкнулся с проблемой добавления кнопки закрытия в диалог в пользовательском интерфейсе материала, он должен отображаться в правом верхнем углу, но отображается на следующей строке. MaterialTable отображается ниже в обоих случаях

<DialogTitle
  disableTypography
  maxWidth="md"
  style={{
    height: "20px",
    background: "#f2f2f2"
  }}
>
  <Typography variant="h6" align="center">
    {"Result Summary - Declaration"}
  </Typography>
  <IconButton
    aria-label="close"
    className={classes.closeButton}
    onClick={handleClose}
  >
    <CloseIcon />
  </IconButton>

</DialogTitle>

Результат кода выше: Крест отображается в блоке

Чего я хочу достичь: Крест отображается правильно

<DialogTitle
  disableTypography
  maxWidth="md"
  style={{
    height: "20px",
    background: "#f2f2f2"
  }}
>
  <Typography variant="h6" align="center">
    {"Result Summary - Declaration"}
  </Typography>
  <IconButton
    aria-label="close"
    className={classes.closeButton}
    onClick={handleClose}
  >
    <CloseIcon />
  </IconButton>
</DialogTitle>

Проблема в том, что они оба используют один и тот же код! Я буквально копирую вставки из 2 разных javascript файлов