Controller to sync all slider in class component

[36peco]

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;

`

Anyone has the solution? Thank you.

[OmKakatkar]

Hey @36peco Did you find a solution for this? It would be great if you posted it here incase you got one.
Thanks!