Tengo un flexbox desplazable horizontalmente como este.

El ancho de cada caja es del 25%. Estoy tratando de desplazarme hacia la izquierda y hacia la derecha usando botones. Ahora se desplaza 420 px como en el código, pero esto provoca problemas de respuesta. ¿Hay alguna forma de usar "25%" en lugar de "420" en reaccionar?

 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); }