title: React scroll component horizontally on button click
body: <p>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.</p>
  
  <p>To make this process easier for the user, I want to create buttons which scroll the horizontal list to the left or right.</p>
  
  <p>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: </p>
  
  <pre><code>Cannot add property scrollX, object is not extensible
  </code></pre>
  
  <p>My code:</p>
  
  <pre><code>const ref = useRef(null);
  
  const scroll = () =&gt; {
    ref.scrollX += 20;
  };
  
  return (
    &lt;div className={style.wrapper} id={id}&gt;
      &lt;Container className={style.container}&gt;
        &lt;Row&gt;
          &lt;Col&gt;
            &lt;button onClick={scroll}&gt;TEST&lt;/button&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
      &lt;div className={style.projects} ref={ref}&gt;
        {projects.map((data, index) =&gt; (
          &lt;CardProject
            key={index}
            title={data.title}
            image={data.image}
            description={data.description}
          /&gt;
        ))}
      &lt;/div&gt;
    &lt;/div&gt;
  );
  </code></pre>