How to change MUI-X default Datagrid scrollbar styles?

I'm using MUI-X datagrid in my application. The default scrollbar looks bad and I don't see any way to customize it. I saw a few threads in github and tried the code below but that doesn't seem to work. Is there any fix for this at all?

sx={{
  '& .MuiDataGrid-virtualScroller::-webkit-scrollbar': {
    width: '0.4em',
  },
  '& .MuiDataGrid-virtualScroller::-webkit-scrollbar-track': {
    background: '#f1f1f1',
  },
  '& .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb': {
    background: '#6BADCE',
    background: '-webkit-linear-gradient(to bottom, #6BADCE, #d7dde8)',  
    background: 'linear-gradient(to bottom, #6BADCE, #d7dde8)',
    borderRadius: '10px',
  },
  '& .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb:hover': {
    background: '#555',
  },
}}