mui v5 styled Dialog not accepting styled width

I have mui v5 dialog that I am not able to set its width using style() component.

import {
} from "@mui/material";
import { Close } from "@mui/icons-material";
import { styled } from "@mui/material/styles";
import ActionButton from "./ActionButton";

import React from "react";

const StyledDialog = styled(Dialog)(({ theme }) => ({
  fullWidth: true, // it's not taking effect
  maxWidth: "lg",  // it's not taking effect
  padding: theme.spacing(2),
  position: "absolute",
  top: theme.spacing(5),
  "& MuiDialog-paper": {
    padding: theme.spacing(2),
    position: "absolute",
    top: theme.spacing(5),
  "& .MuiTypography-h6": {
    paddingRight: "0px",

export default function Popup(props) {
  const { title, children, openPopup, setOpenPopup } = props;
  return (
    <StyledDialog open={openPopup} onClose={() => setOpenPopup(false)}>
        <div style={{ display: "flex" }}>
          <Typography variant="h6" component="div" style={{ flexGrow: 1 }}>
            onClick={() => setOpenPopup(false)}
            <Close />
      <DialogContent dividers>{children}</DialogContent>

However, if I listed the props directly inside the it works.

<StyledDialog fullWidth="true" maxWidth="lg">


What is the correct way of setting up the width and maxWidth.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum