Javascript Horiontally使用React Boostrap中的按钮滚动列表项

我正在尝试使用react和react boostrap创建一个水平列表菜单。但是当列表的长度大于容器的长度时，列表就消失了。我使用overlow-Y作为滚动按钮，但我想有2个按钮，通过它我可以滚动列表。我怎样才能在反应中做到这一点？我想要像图中那样的结果

import React，{useState}来自“React”；
从“react bootstrap/Jumbotron”导入Jumbotron；
从“react bootstrap/ListGroup”导入ListGroup；
从“react引导/容器”导入容器；
从“反应引导/按钮”导入按钮；
导入“/App.css”；
常量应用=（）=>{
const[data，useData]=useState([
{list:“appelll”}，
{list:“balllslsss”}，
{列表：“cattssss”}，
{list:“dogsssss”}，
{列表：“eggsss”}，
{列表：“FATSSSS”}，
{列表：“目标”}，
{列表：“heloooooooooooooooooo”}，
{列表：“IELOOOOO”}，
{列表：“Jelooooo”}，
{list:“keloooo”}，
{list:“leooo”}，
{列表：“Melosdsaddo”}
]);
返回(
+
{data.map（（数据，i）=>{
返回(
console.log（data.list）}
>
{data.list}
);
})}
> 
);
};
导出默认应用程序；

我的工作演示是 因为您设置了

.list_menu::-webkit-scrollbar {
  width: 0;
}

所以去掉

width:0在
.list\u菜单中：：-webkit滚动条
或删除
className=“list\u菜单”
将起作用

<ListGroup
  className="list_menu"
  horizontal
  style={{
    overflowX: "scroll"
    }}
>

它使用宽度：0隐藏条，因为我想用按钮移动条，而不是用条。
<ListGroup
  className="list_menu"
  horizontal
  style={{
    overflowX: "scroll"
    }}
>