Material UI DialogTitle cutomization with Styled is not working

Question

I am using the styled component for material ui Dialog.

I am trying to override the default css of <DialogTitle>. Unfortunately this is not working.

<StyledDialogTitle>{"Delete Task"}</StyledDialogTitle>

export const StyledDialogTitle = styled(DialogTitle)(() => ({
  "& .MuiDialogTitle-root": {
    padding: 2,
    backgroundColor: "red",
  },
}));

Below is the part of the generated html

<h2 class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-1glgnft-MuiTypography-root-MuiDialogTitle-root" id=":r27:">Delete Category</h2>