Hide/disable arrow buttons of horizontal scroller in react.js

You can do that only with useState hook and conditional rendering.

Here’s a fully-working solution assuming we know width of the div that wraps your slides:

const HorizontalScroll = () => {
  
  const [slideLeft, setSlideLeft] = useState(0);
  const sliderWidth = 1900;

  //on arrow click
  const moveRight = () => {
    const el = document.getElementById(`hscroll`);
    setSlideLeft(el.scrollLeft += 200);
  };

  const moveLeft = () => {
    const el = document.getElementById(`hscroll`);
    setSlideLeft(el.scrollLeft -= 200);
  };

  return (
    <div className="homepageMargin">
      <section style={{ display: "flex", justifyContent: "space-between" }}>
        {slideLeft > 0 ? <IconButton onClick={moveLeft}>
          <ArrowBackIcon
            style={{
              paddingTop: ".2rem",
              cursor: "pointer"
            }}
          />
        </IconButton> : <div />}
        {slideLeft < sliderWidth ? <IconButton onClick={moveRight}>
          <ArrowForwardIcon
            style={{
              paddingTop: ".2rem",
              cursor: "pointer"
            }}
          />
        </IconButton> : <div />}
      </section>

      <hr style={{ backgroundColor: "black" }} />
      <div class="flex-container" id={`hscroll`}>
        {data.map((item) => (
          <div style={{ minWidth: "300px" }}>
            <img src={item.imgSrc} alt="images" style={{ width: "18rem" }} />
            <h6>{item.title}</h6>
          </div>
        ))}
      </div>
    </div>
  );
};

Above example works becouse React component re-render every time you update the state. Also, you can get width of your slider like that:

const sliderWidth = yourRefName.current.style.width;

But it has to be declared explicitly in your CSS.