我尝试让用户在点击相应的按钮时进行滚动。我发现您可以使用React中的useRef钩子来实现这一点。但是，当我按下左右滚动按钮时，它不起作用。当我控制台记录ref.current时，我可以看到它正在抓取相应的div。有人看到这里有什么问题吗？

const styles = () => ({
  paper: {
    padding: '25px',
    borderRadius: '10px'
  },
  title: {
    fontSize: '16px',
    fontWeight: 'bold',
    fontStyle: 'normal',
    lineHeight: 3,
    letterSpacing: 'normal',
    textAlign: 'left',
  },
  container: {
    height: '110px',
    overflowX: 'scroll'
  },
  productItemsContainer: {
    display: 'flex',
    overflowX: 'scroll'

  }
});

const relatedProducts = ({
  classes, products
}) => {
  const ref = useRef(null);
  const scroll = (scrollOffset) => {
        ref.current.scrollLeft += scrollOffset;
console.log(ref.current.scrollLeft);
console.log(ref.current);
  };

  return (
    <Paper className={classes.paper}>
      <Typography className={classes.title} gutterBottom>Discover Products</Typography>
      <button onClick={() => scroll(-80)}>LEFT</button>
      <button onClick={() => scroll(+80)}>RIGHT</button>
      <Grid className={classes.container} container direction="column" >
        <Grid item>
          <div className={classes.productItemsContainer} ref={ref}>
            {
              products
                .map((product) => {
                  return (
                    <RelatedProductItem key={product.item} product={product}  />
                  );
                })
            }
          </div>
        </Grid>
      </Grid>
    </Paper>
  );
};

当我检查从事件处理程序触发的日志时，我可以看到div被抓取，而scrollLeft仍然是0，并保持在0。