Почему не работает двусторонний элемент управления Swiper JS?

Я не могу получить какой-либо контроль между двумя Swipers, однако они отрисовываются, как ожидалось, просто НЕТ функциональности рабочего контроллера. Задан аналогичный вопрос, но еще НЕ дан ответа здесь

Я хотел бы получить двухстороннее управление, при котором скольжение в любом направлении на любом из 2 Swiper приводит к эквивалентному скольжению на другом Swiper. Мой код выглядит следующим образом:

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;

Любая помощь высоко ценится!