Consider the following structure:

.container {
  width: 200px;
  height: 100px;
  overflow: auto;
  overflow-y: hidden;
}

.container p {
  width: 300px;
  height: 100px;
  background-color: yellow;
}

<div class="container">
  <p>Sample Text1, Sample Text2, Sample Text3</p>
</div>
<button onclick="handleScrollLeft()">Left</button>
<button onclick="handleScrollRight()">Right</button>

Because I'm working in ReactJS, my real code looks more like this:

    export function Slider() {
    
      const handleScrollLeft = () => {
      }
    
      const handleScrollRight = () => {
      }
    
      return (
        <>
          <div className="container">
            <p>Sample Text1, Sample Text2, Sample Text3</p>
          </div>
          <button onClick="handleScrollLeft">Left</button>
          <button onClick="handleScrollRight">Right</button>
        </>
      );
    }

With those 2 buttons I would like to change the scroll value (move left and right respectively). I'm not sure how to handle this kind of change:

1. In useEffect? (I don't want to force re-render, just expand the scroll functionality to those 2 buttons)
2. Create custom hook? (Same concern)
3. Or should I directly modify that DOM element in the handler functions? (I know this is a big no-no in React)

I'm really confused on which approach is correct, any advise or solution with further explanation on why would be appreciated