Reactjs Swiper Controller to sync all slider in class component

Question

I wondered is there any way to sync all my Slider elements.

The component will be render via an array but I got no idea how to set the controller to make them all move together.

Here's the code:

import React from 'react';
import { Controller } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

const sliderStyle = { width: '100%', height: '100px', marginTop: '20px', backgroundColor: 'red'}

class SwiperTest extends React.Component {
    render() {
        const array = [1,2,3,4,5]
        return (
            <main>
            {
                array.map(e => {
                    return(
                        <div style={sliderStyle}>
                            <p>slider {e}</p>
                            <Swiper
                                modules={[Controller]}
                                controller={{ control: Swiper }}
                            >
                                <SwiperSlide>1</SwiperSlide>
                                <SwiperSlide>2</SwiperSlide>
                                <SwiperSlide>3</SwiperSlide>
                                <SwiperSlide>4</SwiperSlide>
                                <SwiperSlide>5</SwiperSlide>
                            </Swiper>
                        </div>
                    )
                })
            }
          
        </main>
      );
}
};

export default SwiperTest;