MUI5 Table Cell and Column Width - reactjs

Question

I am using a MUI5 React table and have a hard time figuring out how to adjust the column and cell width. The table needs to span 100% but the fields have to stay together and not spread out automatically like they are doing now. Ideally, I need to set the width of the cell to the width of the content, or at least to a fixed width. Here are my components:
const StyledTableCell = styled(TableCell)(({ theme }) => ({
height: "44px",
padding: "5px 12px",
[`&.${tableCellClasses.head}`]: {
color: theme.palette.gray.main,
fontWeight: 700,
fontSize: "12px",
lineHeight: "14px",
height: "20px",
},
[`&.${tableCellClasses.body}`]: {
fontWeight: 400,
fontSize: "13px",
color: theme.palette.darkGray.main,
},
}));
const StyledTableRow = styled(TableRow)(({ theme }) => ({
"&:nth-of-type(even)": {
backgroundColor: theme.palette.action.hover,
},
border: 0,
}));
function DataTable({data}) {
function createData(fields) {
const res = { ...fields };
return res;
}
const rows = data.map((el) => {
return createData(el);
});
return (
<TableContainer sx={{ width: "100%", marginBottom: "25px" }}>
<Table
sx={{
[`& .${tableCellClasses.root}`]: {
borderBottom: "none",
},
}}
>
<TableHead>
<TableRow>
{SectionTitles.container.fields.map((field, index) => {
return (
<StyledTableCell key={index} align="left">
{field}
</StyledTableCell>
);
})}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
<StyledTableRow key={index}>
{Object.keys(row).map((el, index) => {
return (
<StyledTableCell key={index} align="left">
{row[el]}
</StyledTableCell>
);
})}
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
I have tried setting the width in the styled components and tried to set it in sx as well but nothing is working, the columns still spread out. I have explored pretty much every solution I could find on SO and on google and nothing is making it change the width.