psudeo element: scrollbar is not working

[Neha-takhi-cipl]

Hi, I have to customize the horizontal scrollbar. But psuedoclass scrollbar is not being added.
HTML Content is:

<div className="menuBar">
       <Container>
         <Row>
           <Col>
             <ul className="navbar">
               <Link to={null}>Some Content</Link>
               <li>
                 <Link to={null}>Some Content </Link>
               </li>
               <li>
                 <Link to={null}>Some Content</Link>
               </li>
               <li>
                 <Link to={null}>Some Content</Link>
               </li>
             </ul>
           </Col>
           <Col>
             <ul className="navbar borderLeft">
               <Link to={null}>Some Content </Link>
               <li>
                 <Link to={null}>Some Content</Link>
               </li>
               <li>
                 <Link to={null}>Some Content</Link>
               </li>
               <li>
                 <Link to={null}>Some Content </Link>
               </li>
             </ul>
           </Col>
           <Col>
             <ul className="navbar borderLeft">
               <Link to={null}>Some Content</Link>
               <li>
                 <Link to={null}>Some Content</Link>
               </li>
               <li>
                 <Link to={null}>Some Content</Link>
               </li>
               <li>
                 <Link to={null}>Some Content</Link>
               </li>
             </ul>
           </Col>
         </Row>
       </Container>
     </div>

Css is

"& .menuBar": {
   "overflowX": "auto",
   "::scrollbar": {
     width: "20px",
   },
   /* Track */
   "::scrollbarTrack": {
     boxShadow: "inset 0 0 5px grey",
     borderRadius: "10px",
   },

   /* Handle */
   "::scrollbarThumb": {
     background: "red",
     borderRadius: "10px",
   },

   /* Handle on hover */
   "::scrollbarThumb:hover": {
     background: "#b30000",
   },
 }