swiper/react SwiperSlide's images out of order until autoplay

Issue

So, I am really struggling with fixing these slides' images correlating to the right slides. When the data is first initialized on the <SwiperSlide> components in the <Swiper>, the images don't match its object values, but the next slides appear on the screen are correct. Somewhere in the autoplay the elements get mixed up and the <div className="abs_img" data-bg-img={item.img} /> element starts becoming out of sync. My guess has to be something with the autoplay or something in the <Swiper>'s props?

<Swiper {...portfolioSliderProps} className="owl-carousel modal_items" data-from="portfolio">
    {data.map((item) => {
        return (
            <SwiperSlide
                key={item.id}
                className="item modal_item"
                onClick={() => {
                    setModal(true);
                    setModalValue(item.id);
                }}
                data-index={item.id}
            >
                <div className="img_holder">
                    <img src="img/thumb/square.jpg" alt="image" />
                    <div className="abs_img" data-bg-img={item.img} />
                </div>
                <div className="title_holder">
                    <p>{item.tag}</p>
                    <h3>
                        <a href="#">{item.name}</a>
                    </h3>
                </div>
                <div className="fn__hidden">
                    <p className="fn__cat">{item.tag}</p>
                    <h3 className="fn__title">{item.name}</h3>
                    <div className="img_holder">
                        <img src="img/thumb/square.jpg" alt="image" />
                        <div className="abs_img" data-bg-img={item.img} />
                    </div>
                    <p className="fn__desc">{item.desc[0].p}</p>
                </div>
            </SwiperSlide>
        );
    })}
</Swiper>

const portfolioSliderProps = {
    slidesPerView: 1,
    loop: true,
    spaceBetween: 30,
    speed: 1000,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".next",
        prevEl: ".prev",
    },
    breakpoints: {
        480: {
            slidesPerView: 2,
        },
        1400: {
            slidesPerView: 3,
        },
    },
};

const data = [
        {
            id: 1,
            name: "Sweet Cherry",
            tag: "illustration, design",
            desc: [
                {
                    p: "Sed ornare tellus a odio bibendum, at tristique sapien malesuada. Proin sagittis maximus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Sed sollicitudin rhoncus blandit. Nam accumsan vestibulum enim. Sed rutrum eu leo pellentesque lobortis. Integer ornare fringilla arcu, eu mattis risus convallis in.",
                },
            ],
            github: "#",
            link: "#",
            img: "img/portfolio/1.jpg",
        },
        {
            id: 2,
            name: "Delicious Fruit",
            tag: "web, mobile, online",
            desc: [
                {
                    p: "Proin sagittis maximus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Integer ornare fringilla arcu, eu mattis risus convallis in.",
                },
                {
                    p: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Sed sollicitudin rhoncus blandit. Nam accumsan vestibulum enim. Sed rutrum eu leo pellentesque lobortis. Integer ornare fringilla arcu, eu mattis risus convallis in. Sed ornare tellus a odio bibendum, at tristique sapien malesuada. ",
                },
            ],
            github: "#",
            link: "#",
            img: "img/portfolio/2.jpg",
        },
        {
            id: 3,
            name: "Ice Cream",
            tag: "mobile, design",
            desc: [
                {
                    p: "Sed ornare tellus a odio bibendum, at tristique sapien malesuada. Proin sagittis maximus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Sed sollicitudin rhoncus blandit. Nam accumsan vestibulum enim. Sed rutrum eu leo pellentesque lobortis. Integer ornare fringilla arcu, eu mattis risus convallis in.",
                },
            ],
            github: "#",
            link: "#",
            img: "img/portfolio/3.jpg",
        },
        {
            id: 4,
            name: "Blue Lemon",
            tag: "design, vector",
            desc: [
                {
                    p: "Proin sagittis maximus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Integer ornare fringilla arcu, eu mattis risus convallis in.",
                },
                {
                    p: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Sed sollicitudin rhoncus blandit. Nam accumsan vestibulum enim. Sed rutrum eu leo pellentesque lobortis. Integer ornare fringilla arcu, eu mattis risus convallis in. Sed ornare tellus a odio bibendum, at tristique sapien malesuada.",
                },
            ],
            github: "#",
            link: "#",
            img: "img/portfolio/4.jpg",
        },
        {
            id: 5,
            name: "Yellow Phone",
            tag: "mobile, design",
            desc: [
                {
                    p: "Proin sagittis maximus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Integer ornare fringilla arcu, eu mattis risus convallis in.",
                },
                {
                    p: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida quam sit amet elit varius tempor. Pellentesque purus eros, blandit eu mollis vel, commodo eget orci. Proin vel hendrerit ex. Vivamus ut ex at nunc consectetur efficitur ut quis est. Proin posuere orci eget vulputate fringilla. Curabitur placerat massa eget efficitur cursus. Sed sollicitudin rhoncus blandit. Nam accumsan vestibulum enim. Sed rutrum eu leo pellentesque lobortis. Integer ornare fringilla arcu, eu mattis risus convallis in. Sed ornare tellus a odio bibendum, at tristique sapien malesuada.",
                },
            ],
            github: "#",
            link: "#",
            img: "img/portfolio/5.jpg",
        },
    ];

https://codesandbox.io/s/swiper-nextjs-swiperslide-help-6wzln?file=/src/components/Portfolio.js

I posted this earlier but got a negative rep with no reason why! If there's a problem with my post, please leave a comment and I'll promptly fix it.

Solution

So I'm sure there are other ways of solving this but I found that the problem lies in the <Swiper>'s prop loop: true. I removed that prop and the imagines are assigned to the right slides.

updated props:

const portfolioSliderProps = {
    slidesPerView: 1,
    spaceBetween: 30,
    speed: 1000,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".next",
        prevEl: ".prev",
    },
    breakpoints: {
        480: {
            slidesPerView: 2,
        },
        1400: {
            slidesPerView: 3,
        },
    },
};

Answered By - Cole