How can i make a infinite horizontal scroll that recibes input from mouse wheel with Javascript & React

Question

I'm trying to recreate this effect in my website i'm using javascript and React:

https://collection-ii.mfisher.com/

As evident from the interaction, dragging or using the mouse wheel causes the carousel to navigate through products until it reaches the end, whereupon it displays the elements from the beginning once more. Upon inspection using the browser's developer tools, I found that it employs Matrix3d transformations to navigate across the screen manually. Furthermore, when the product cards move out of the viewport, they are set to visibility:hidden.

I attempted unsuccessfully to recreate this effect using the transform: translate property, passing the mouseWheel attribute e.Page.Y to translate in the X-axis until it's out of the viewport. If it is out of the viewport, I transform translate-x to equal the number of cards multiplied by the width plus event.page.Y, and it works... just once. This is because I never determine when it returns to the screen to repeat the process. Obviously, if I set it to be within the viewport again, the process restarts.

I hope I have successfully explained my problem. I'll link a JSFiddle so you can see my attempt.

Here is my try

Also my JS Code:

    let move = 1
    let gap = 12
    const slider = document.getElementById("product-slider")

    
    slider.addEventListener('mousewheel', (e)=>{
        e.preventDefault()
    
        console.log(slider.scrollLeft, e.deltaY);
        
        //move with mouseWheel value
        move += (e.deltaY * 0.4)

        var productCards = slider.children
        
        for (let i = 0; i < productCards.length; i++) {
            
            
            const product = slider.children[i];
            const widthToLastProduct = (product.offsetWidth+gap) * productCards.length;
            
            //sees if current div is out of view and if it is adds class out-of-view
            isOutOfView(slider, product)
            
            console.log(move);
            
            if (product.classList.contains('out-of-view')){
                product.style.transform = `translate(${widthToLastProduct+move}px, 0px)`

            }else{
                product.style.transform = `translate(${move}px, 0px)`

            }

            
        }   

    })

    function isOutOfView(container, element) {

        var gapSize = 6
        
        var docViewRight = container.scrollLeft + container.offsetWidth + gapSize
        var docViewLeft = container.scrollLeft
        
        var cardLeft = element.getBoundingClientRect().left
        var cardWidth = element.offsetWidth

        //calculates if card is out of container 
        if(cardLeft+cardWidth < 0){

            element.classList.add('out-of-view')

            console.log("SET INVISIBLE OR MOVE")

        }
        
    }