I am trying to get the arrow button conditionally if the screen size is smaller or the more steps is coming in, but its not working

Question

I am trying to get the arrow button back and forth conditionally if the screen size is smaller or the more steps is coming in, also if there is no step beyond then the arrow should not shown, but its not working in my current implementations,

export const StatusStepper = ({ activeStep, steps, handleStepClick }) ={
    const stepperRef = useRef(null);
    const [showLeftArrow, setShowLeftArrow] = useState(false);
    const [showRightArrow, setShowRightArrow] = useState(false);

    const checkArrows = () ={
        if (stepperRef.current) {
            setShowLeftArrow(stepperRef.current.scrollLeft 0);
            setShowRightArrow(stepperRef.current.scrollLeft < stepperRef.current.scrollWidth - stepperRef.current.clientWidth);
        }
    };

    const scrollStepper = (direction) ={
        if (stepperRef.current) {
            const stepWidth = stepperRef.current.clientWidth / steps.length;
            const scrollAmount = direction === 'left' ? -stepWidth : stepWidth;
            stepperRef.current.scrollBy({
                left: scrollAmount,
                behavior: 'smooth',
            });
        }
    };

    useEffect(() ={
        checkArrows();
    }, []);

    useEffect(() ={
        const handleResize = () ={
            checkArrows();
        };

        window.addEventListener('resize', handleResize);

        return () ={
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    return (
        <div className="stepper-container">
            {showLeftArrow && (
                <div className="arrow-container" onClick={() =scrollStepper('left')}>
                    <ArrowBackIosIcon />
                </div>
            )}
            <div className="stepper-content" ref={stepperRef}>
                <div className="breadcrumb">
                    {steps.map((step, index) =(
                        <a
                            key={index}
                            href="#"
                            onClick={() =handleStepClick(index, step.status)}
                            className={`${activeStep === index ? 'active' : ''}`}
                            style={{ cursor: 'pointer' }}
                        >
                            <span className="breadcrumb__inner">
                                <span className="breadcrumb__title">{step.title}</span>
                                {/* <span className="badge" style={{
                                    backgroundColor: activeStep === index ? '#fff' : '#255F79',
                                    color: activeStep === index ? '#255F79' : '#fff',
                                    fontSize: '0.75rem',
                                }}>
                                    {step.counts}
                                </span*/}
                            </span>
                        </a>
                    ))}
                </div>
            </div>
            {showRightArrow && (
                <div className="arrow-container" onClick={() =scrollStepper('right')}>
                    <ArrowForwardIosIcon />
                </div>
            )}
        </div>
    );
};

I tried to use the window.addEventListener but it's not working.