I am currently building a card section which shows a horizontal list of cards. This list overflows, which makes the user have to scroll horizontally to view the offscreen cards.

To make this process easier for the user, I want to create buttons which scroll the horizontal list to the left or right.

I tried solving this by creating a reference to the horizontal list and apply a scrollX when I click on the previously mentioned button. This however, results in the following error:

Cannot add property scrollX, object is not extensible

My code:

const ref = useRef(null);



const scroll = () => {

  ref.scrollX += 20;

};



return (

  <div className={style.wrapper} id={id}>

    <Container className={style.container}>

      <Row>

        <Col>

          <button onClick={scroll}>TEST</button>

        </Col>

      </Row>

    </Container>

    <div className={style.projects} ref={ref}>

      {projects.map((data, index) => (

        <CardProject

          key={index}

          title={data.title}

          image={data.image}

          description={data.description}

        />

      ))}

    </div>

  </div>

);