'TypeError: Cannot read properties of undefined (reading 'next')

I'm having this error in my console despite the code working. What am I doing wrong?

Uncaught TypeError: Cannot read properties of undefined (reading 'next') at autoImageSlide

Uncaught TypeError: Cannot read properties of undefined (reading 'previous')

https://i.stack.imgur.com/23qT9.png

useEffect(() => {
    const welcomeImgs = document.querySelectorAll('#welcome__img__slide > img')
    let animates = []
    welcomeImgs.forEach((item, index) => {
        let nextImg = welcomeImgs[index === welcomeImgs.length - 1 ? 0  : index + 1].getAttribute('src')
        let animation = new hoverEffect({
            parent: document.querySelector('#welcome__img__slide'),
            intensity: 0.5,
            image1: item.getAttribute('src'),
            image2: nextImg,
            displacementImage: distortion,
            hover: false
        })
        animates.push(animation)
    })

    welcomeImgs.forEach(e => e.remove())

    let currItem = 0

    const autoImageSlide = () => {
        let prevItem = currItem
        currItem = (currItem + 1) % animates.length

        if (!document.hidden) {
            animates[prevItem].next();
        }

        setTimeout(() => {
            let canvas = document.querySelectorAll('#welcome__img__slide > canvas')
            document.querySelector('#welcome__img__slide').appendChild(canvas[0])
            animates[prevItem].previous();
        }, 3000)
    }

    setInterval(autoImageSlide, 3000);
},[])


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source