**你好，我遇到了react-horizontal-scrolling-menu的问题，滚动的时候向右滚动了很多，剩下的元素都消失了，当你添加overflowX的时候：'scroll'到BOX，滚动直到第一次点击后才起作用

加上左箭头，右箭头不工作
看看代码**
[error img here]

<Box component="div" sx={{position:'relative', width:'100%',p:'20px'}}>
        <HorizontalScrollbar data={bodyParts} bodyParts={bodyParts} bodyPart={bodyPart} setBodyPart={setBodyPart}/>
  </Box>

水平滚动条

import React, { useContext } from 'react';
import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
import { Box, Typography } from '@mui/material';
import BodyPart from './BodyPart';
import RightArrowIcon from '../assets/icons/right-arrow.png';
import LeftArrowIcon from '../assets/icons/left-arrow.png';

const LeftArrow = () => {
  const { scrollPrev } = useContext(VisibilityContext);

  return (
    <Typography onClick={() => scrollPrev()} className="right-arrow">
      <img src={LeftArrowIcon} alt="right-arrow" />
    </Typography>
  );
};

const RightArrow = () => {
  const { scrollNext } = useContext(VisibilityContext);

  return (
    <Typography onClick={() => scrollNext()} className="left-arrow" >
      <img src={RightArrowIcon} alt="right-arrow"/>
    </Typography>
  );
};

const HorizontalScrollbar = ({ data, bodyParts, setBodyPart, bodyPart }) => (
  <Box mt={4} sx={{position:'static'}}>
  <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
    {data.map((item) => (
      <Box
        key={item.id || item}
        itemId={item.id || item}
        title={item.id || item}
        m="0 40px"
      >
         <BodyPart item={item} setBodyPart={setBodyPart} bodyPart={bodyPart} /> 
      </Box>
    ))}
  </ScrollMenu>
  </Box>
);

export default HorizontalScrollbar;