Не отрабатывает условие при событии DragEnd

Пишу на JS меньше года. Пытаюсь написать условие для драга карточки, чтобы учитывалось условие при котором определяется 1-ый и последний элемент в массиве и функция не отрабатывала. Но почему-то условие игнорируется, при том что в консоль никаких ошибок не выводится.

Функция:

const onDragEnd = (e) => {
    if (isActive)
        if (e.clientX >= window.innerWidth / 2)
            if (!cardsArray[0])
                setActive(active - 1)
            else return null

        else if (e.clientX <= window.innerWidth / 2)
            if (!cardsArray.length - 1)
                setActive(active + 1)
            else return null

    if (isPrev)
        setActive(active - 1)
    else if (isNext)
        setActive(active + 1)

}

Сам компонент с карточками:

const cardsList = (
        <motion.div
            className={s.cardsList}
            style={{ transform: `translateX(${active * -50}%)` }}

        >
            {
                cardsArray.map(({ name, img, link, isDesktop }, i) => {

                    const isActive = i === active
                    const isPrev = i < active
                    const isNext = i > active

                    const handleClick = () => {
                        if (isActive)
                            history.push(link)              
                        if (isPrev)
                            setActive(active - 1)
                        else if (isNext)
                            setActive(active + 1)
                    }

                    const onDragEnd = (e) => {
                        if (isActive)
                            if (e.clientX >= window.innerWidth / 2)
                                if (!cardsArray[0])
                                    setActive(active - 1)
                                else return null

                            else if (e.clientX <= window.innerWidth / 2)
                                if (!cardsArray.length - 1)
                                    setActive(active + 1)
                                else return null

                        if (isPrev)
                            setActive(active - 1)
                        else if (isNext)
                            setActive(active + 1)

                    }

                    return (

                        <Card
                            key={i}
                            name={name}
                            img={img}
                            link={link}
                            {...{
                                i,
                                isActive,
                                isNext,
                                isPrev,
                                handleClick,
                                isDesktop,
                                onDragEnd
                            }}
                        />
                    )
                })
            }
        </motion.div>
    )

Заранее благодарю за помощь!