Styling scrollbar on specific element on mui v5

Question

I have tried styling Box components using the suggested approach from this answer.

<Box sx={{
  overflow:"auto",
  scrollbarWidth: 'thin',
  '&::-webkit-scrollbar': {
    width: '0.4em',
  },
  '&::-webkit-scrollbar-track': {
    background: "#f1f1f1",
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: '#888',
  },
  '&::-webkit-scrollbar-thumb:hover': {
    background: '#555'
  }
  }}>
</Box>

However it doesn't work on my end, the scrollbar style works only if I put it on the global styles, but it will be applied to all elements which I don't want. Any suggestions?