I am unable to get any kind of control going between 2 Swipers, however they are rendering as expected, just NO working controller functionality. A similar question has been asked and NOT yet answered [here](https://stackoverflow.com/questions/63928809/how-to-fix-bug-with-two-way-controll-swiper-in-reactjs)

I would like to get two way control, where sliding in either direction on any of the 2 Swipers results in an equivalent sliding on the other Swiper. My code is as follows:

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

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/controller/controller.scss';

import './styles.css';

// install Swiper's Controller component
SwiperCore.use([Controller]);

const App = () => {
  // store swiper instances
  const [firstSwiper, setFirstSwiper] = useState(null);
  const [secondSwiper, setSecondSwiper] = useState(null);

  const slides = [];
  for (let i = 0; i < 5; i += 1) {
    slides.push(
      <SwiperSlide key={`slide-${i}`}>
        <img
          src={`https://picsum.photos/id/${i + 1}/500/300`}
          style={{ listStyle: 'none' }}
          alt={`Slide ${i}`}
        />
      </SwiperSlide>
    );
  }

  const slides2 = [];
  for (let i = 9; i < 14; i += 1) {
    slides2.push(
      <SwiperSlide key={`slide-${i}`}>
        <img
          src={`https://picsum.photos/id/${i + 1}/500/300`}
          style={{ listStyle: 'none' }}
          alt={`Slide ${i}`}
        />
      </SwiperSlide>
    );
  }

  return (
    <>
      <Swiper
        onSwiper={setFirstSwiper}
        controller={{ control: secondSwiper }}
        slidesPerView={1}>

        {slides}
      </Swiper>

      <Swiper
        onSwiper={setSecondSwiper}
        controller={{ control: firstSwiper }}
        slidesPerView={1}>

        {slides2}
      </Swiper>
    </>
  );
};

export default App;

```

Any help is much appreciated!