**Hola, tengo un problema con react-horizontal-scrolling-menu , al hacer scroll se desplaza mucho hacia la derecha, y el resto de elementos desaparecen, y cuando agregas overflowX: 'scroll' al BOX , el desplazamiento no funciona hasta después del primer clic

Plus LeftArrow, RightArrow no funcionan

Echa un vistazo al código**

imagen de error aquí

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

Desplazamiento horizontalba

 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;