I am trying to apply this code in order to change the width of scrollbar using internal css(i.e css
stored in the javascript object) but it’s not working. My requirement is to change the width of the scrollbar using internal css only in react.js project.

`export default function ButtonsContainer() {
  let cssobject = {
    secondDiv_css: {
      display: "flex",
      flexDirection: "column",
      height: "8vh",
      overflowY: "scroll",
      // scrollbarWidth:"thin",
      "&::-webkit-scrollbar": {
        width: "1px", // Width of the scrollbar
      },
      "&::-webkit-scrollbar-thumb": {
        backgroundColor: "#888", // Color of the thumb
      },
    },
  };

  return (
    <List style={cssobject["secondDiv_css"]}>
      {["btn1", "btn2", "btn3", "btn4"].map((txt) => {
        return (
          <ListItem>
            <Button>{txt}</Button>
          </ListItem>
        );
      })}
    </List>
  );
}`