如何在React JS中制作水平滚动条（例如Google的水平滚动条）？

Question

在React js中问这个最简单的方法是什么？ 如何使用此code.see图像预期输出制作滚动条？ * [{https://i.stack.imgur.com/nex4t.png][1]

import React from 'react';
import ScrollContainer from "react-indiana-drag-scroll";
import './App.css';
const list = new Array(15).fill(1).map((_, index) => index + 1);
const Arrow = ({ text, className }) => {
  return <div className={className}>{text}</div>;
};
class Nav extends React.Component{
render(){
  return(
      <div className="Head">
          <div className="Filters">
Filters
          </div>
          <div className="categories">
            <ScrollContainer className="pn-ProductNav">
              <div className="pn-ProductNav_Contents ">

              {list.map(el => (
              <a href="googl.com" className="pn-ProductNav_Link" >
                <div className="inner" key={el}>
                Chairs
                </div>
                </a>
              ))}
          </div>
          </ScrollContainer>
      </div>
      </div>
  );
  }

}
export default Nav;