Как конвертировать карусель jQuery в React?

Question

Так что я пытаюсь взять этот метод карусели flex-box из jQuery и преобразовать его в React для Gatsby, но я признаю, что я новичок и в Gatsby, и в React.Я не уверен, где я иду не так здесь.

Вот ссылка на метод jQuery: https://codepen.io/veronicadev/pen/yjgjvL

Есть ли более простой способ создать карусель в Гэтсби?Потому что раньше я пытался установить с реагирующей каруселью, и это, похоже, не сработало.

class Products extends React.Component {
    constructor(props){
        super(props);
        this.state= {
            isActive : false,
            total : $('.carousel-item').length,
            current : 0,
        }
    }

    toggleActive = () => {
      this.state({
        isActive: !this.state.isActive,
      })
    }
    slideRight = () => {
        this.state({
            next = current,
            current = current + 1,
            setSlide(next,current) { 
                this.state({
                    slide = current,
                    if (next > total-1) = {
                      slide = 0
                      current = 0 
                    }, if (next < '0') {
                        slide = total-1,
                        current = total + 1, 
                    },
                    $('.carousel-item').onClick(toggleActive);
                })
        },
    }),
    }
    slideLeft = () => {
        this.state({
            prev = current,
            current = current - 1,
            setSlide(prev, current)

                })
            }
        })
    }

    render (){
    return (
    <div className="product-body">
        <div className="carousel">
        <div className="carousel__nav">
        <span id="moveLeft" className="carousel__arrow" onClick={this.slideLeft}>
        <svg className="carousel__icon" width="15" height="26" viewBox="0 0 15 26" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12.8507 24.0657L2 13.215L12.8507 2.36432" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
            </span>
            <span id="moveRight" className="carousel__arrow" onClick={this.slideRight}>
            <svg className="carousel__icon" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.4109 3.00001L24.0779 14.0312L13.0467 24.6983" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
            </span>
        </div>
        <div className="pages">
                    <GreenBackground
                    className={`carousel-item--01 ${isActive}`}
                    id="greenbck"
                    itemImage = {imageList.turdBurgler}
                    price="$5.00"
                    title="Turd Burgler"
                    category="stranger"
                    calories="789 calories"
                    description="Two chocolate cake donuts smothered in cookie butter glaze. Oreo chocolate chip cookie dough. With fudge drizzle."
                    />
                </div>
                </div>
        </div>
    )
                }
}
export default Products;