What is the best way to apply global styles in material-ui v5?

I am using Material-UI v5 for my project. I need to style my scrollbars using the following css

  body::-webkit-scrollbar {
    width: 12px;
  }
  body::-webkit-scrollbar-track {
    background: blue;
  }
  body::-webkit-scrollbar-thumb {
    background-color: red;
    border: 3px solid black;
    border-radius: 10px;
  }

I tried using makeStyles as following:

const useStyles = makeStyles((theme: Theme) => ({
    root: {
        background: theme.palette.primary.main,
        'html': {
            scrollbarWidth: 'thin',
            scrollbarColor: theme.palette.accent.main
        },
        'body::-webkit-scrollbar': {
            width: '12px'
        },
        'body::-webkit-scrollbar-track' : {
            background: theme.palette.primary.main,
        }
    },
}));

But when I inspect the actual source css was coming as 'body::-webkit-scrollbar' : Object[object].

I am stuck on how to add global css like this in material-ui and what is the best way to do this.

Also please let me know incase I am doing anything wrong here. Thanks in advance.