I have a horizontally scrollable flexbox like this.

Each box width is 25%. I'm trying to scroll left and right using buttons. Now it scrolls by 420px as in the code, But this causes responsive issues. Is there any way to use "25%" instead of "420" in react.

const scrollLeftHandler = () => {
    var elmnt = document.getElementById("programCard");
    if (elmnt.scrollLeft !== 0) {
      elmnt.scrollLeft += -420;
      setIsRightSlide(true);
    } else {
      setIsLeftSlide(false);
    }
  };
  const scrollRightHandler = () => {
    var elmnt = document.getElementById("programCard");
    if (elmnt.scrollLeft % 420 === 0 && isRightSlide) {
      console.log("if");
      setIsLeftSlide(true);
      elmnt.scrollLeft += 420;
    } else if (isRightSlide) {
      elmnt.scrollLeft = elmnt.scrollLeft - (elmnt.scrollLeft % 420);
      elmnt.scrollLeft += 420;
      setIsRightSlide(false);
    } else {
      console.log("else", elmnt.scrollLeft);
      setIsRightSlide(false);
    }