React SwiperJs autoplay not making the swiper to auto swipe

Question

I am using this swiper in React: https://swiperjs.com/react/

I tried to make it "autoplay" but it doesn't auto swipe. This is what I tried:

// https://swiperjs.com/get-started/
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    SwiperStyle: {
        backgroundColor: '#f5f5f5',
        height: '58px',
        width: '100%',
    },
});

export default function TextInfoSlider(props) {
    const classes = useStyles();

    return (
        <div>

            <Swiper
                loop={true}
                autoplay={{
                    delay: 500,
                    disableOnInteraction: false
                }}
            >

                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
                <SwiperSlide>Slide 4</SwiperSlide>

            </Swiper>

            <style jsx global>{`
                    .swiper-container {
                        background-color: #f5f5f5;
                    }
           `}</style>
        </div>
    )
}

I have also tried to just use boolean on the autoplay but it also doesn't work:

        <Swiper
            loop={true}
            autoplay={true}
            }}
        >

Answer 1

By default Swiper React uses core version of Swiper (without any additional components). If you want to use Navitation, Pagination and other components, you have to install them first

It does not seem you have installed Autoplay component.

import SwiperCore, { Autoplay } from 'swiper';
...
SwiperCore.use([Autoplay]);