How can I modify the scrollbar with ReactJS + Chakra UI?

I'm trying to modify the style of my scrollbar but I can't get it.

I have tried with the parameters: css, __css and sx.

Example:

             __css={{
                '&::-webkit-scrollbar': {
                    width: '2px',
                },
                '&::-webkit-scrollbar-track': {
                    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
                    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
                    width: '2px',
                },
                '&::-webkit-scrollbar-thumb': {
                    backgroundColor: 'rgba(0,0,0,.1)',
                    outline: '1px solid slategrey',
                    borderRadius: '24px',
                },
            }}

As see on:
https://stackoverflow.com/questions/65042380/how-to-add-webkit-scrollbar-pseudo-element-in-chakra-ui-element-react

Best way I use for basic customization, put the following code inside a .css or .scss or .sass file:

* {
  scrollbar-width: thin;
  scrollbar-color: transparent var(--primary);
}

*::-webkit-scrollbar {
  width: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 0;
  border: none;
}

You can check for more options at https://css-tricks.com/almanac/properties/s/scrollbar/