MUI Data Grid horizontal scrolling (responsiveness) is not working - reactjs

Question

I created a Data Grid table with 10 columns. It looks great on big screens but when I squeeze it below 1380 px, I expect to see a horizontal bar scrolling but it looks terrible.
I don't want to switch to another library and just need to fix this horizontal scrolling problem. In the docs, it works perfectly. But I use renderCell and I think that cause the problem. But couldn't solve it still.
Here is how it looks like in big screens:
Here how it looks like at 1303 px:
And here on mobile sizes it can scroll but its sequeezed a lot and looks terrible:
I tried many suggestions on stack but couldn't find any solution still.
Here is my styled DataGrid props:
<DataGridStyled
rows={getRowData()}
autoHeight
rowHeight={80}
columns={columns}
rowsPerPageOptions={[5, 10, 15, 30, 100]}
pageSize={pageSize}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
checkboxSelection
disableSelectionOnClick
pagination
scrollbarSize={50}
/>
Here is the 5th column (I used renderCell maybe its because of this?):
{
field: 'bloodPressure',
headerName: 'BP (mmHg)',
headerAlign: 'center',
align: 'center',
type: 'string',
flex: 1,
editable: false,
valueGetter: (params) =>
params?.row?.bloodPressure?.lastSys === undefined
? null
: params?.row?.bloodPressure?.lastSys,
renderCell: (params) => {
return (
<Tooltip
sx={{ cursor: 'pointer' }}
followCursor
title={
params.row?.bloodPressure?.lastDate === undefined
? 'No measurement'
: moment(params.row?.bloodPressure?.lastDate).fromNow()
}
>
<Box
display="flex"
alignItems="center"
justifyContent="center"
width={'60%'}
bgcolor={params.row?.bloodPressure?.riskColor}
borderRadius={1}
py={0.3}
>
<Typography variant="subtitle1" color="black">
{params.row?.bloodPressure?.lastSys === undefined ||
params.row?.bloodPressure?.lastDia === undefined
? '--'
: `${params.row?.bloodPressure?.lastSys?.toFixed(
0
)}/${params.row?.bloodPressure?.lastDia?.toFixed(0)}`}
</Typography>
<Typography
variant="subtitle1"
color="black"
sx={{
display: 'flex',
alignItems: 'center'
}}
>
{params.row?.bloodPressure?.lastSys === undefined &&
params.row?.bloodPressure?.lastDia === undefined ? null : params
.row?.bloodPressure?.lastSys +
params.row?.bloodPressure?.lastDia >
params.row?.bloodPressure?.previousSys +
params.row?.bloodPressure?.previousDia ? (
<ArrowUpwardIcon
sx={{
fontSize: 14,
lineHeight: 1.75,
height: '100%'
}}
/>
) : (
<ArrowDownwardIcon
sx={{
fontSize: 14,
lineHeight: 1.75,
height: '100%'
}}
/>
)}
</Typography>
</Box>
</Tooltip>
);
}
},