Изменение стрелки в слайдере

Хочу поменять стрелку когда слайдер дойдет до конца (с arrowtwo на arrowone), однако почему то слайдер некорректно начинает работать из за useState для img и к тому же картинка обновляется при повторном нажатии, а должна как только слайдер дойдет до конца (как сделать - без понятия). В общем новичок просит помощи. Заранее спасибо.

// сами картинки
import arrowone from "../../../../img/arrows/arrowdisabled.svg";
import arrowtwo from "../../../../img/arrows/arrow-2px-70.svg";

const slider = useRef(null);

    let [position, setPosition] = useState(-((noveltiesList.length / 2 - 1) * 350))
    const [img, setImg] = useState(true);

    const styleFromTrack = {
        transform: `translateX(${-((noveltiesList.length / 2 - 1) * 350)}px)`,
    };
    
    // функция для прокрутки вправо
    const prevHandler = () => {
        if (position != 0) {
            position += 350;
            slider.current.childNodes.forEach((element) => {
                element.style = `transform: translateX(${position + 'px'})`
            })
        }else{
            setImg(false)
        }
    };
    
    // функция для прокрутки влево
    const nextHandler = () => {
        if (position != -(noveltiesList.length - 3) * 350) {
            position += -350;
            slider.current.childNodes.forEach((element) => {
                element.style = `transform: translateX(${position + 'px'})`
            })
        }else{
            setImg(false)
        }
    };
    
    return (
        <>
            <div className="content">
                <div className={style.body}>
                    <h2 className={style.title}>
                        <span className="orange-letter">Н</span>овинки
                    </h2>

                    <div className={style.slider}>
                        <div className={style.slider__arrow}>
                            <button onClick={prevHandler} >
                                <img src={ img ? arrowtwo : arrowone}  alt="" />
                            </button>
                        </div>
                        <div className={style.slider__track} ref={slider} >
                            // блоки
                        </div>
                        <div className={style.slider__arrow}>
                            <button onClick={nextHandler}>
                                <img src={img ? arrowtwo : arrowone}  alt="" />
                            </button>
                        </div>
                    </div>

                    <div className={style.button}>
                        <ButtonGoToCacalog />
                    </div>
                </div>
            </div>
        </>