Не получается увязать между собой два элемента swiper

У меня есть два swiper. Необходимо, чтобы при клике на второй swiper (на один из слайдов) , на первом открывался соответствующий слайд (по индексу). Что я делаю не так? И второй отдельный вопрос: можно ли в одном слайдере сделать две зоны прокрутки (как на картинке, но чтобы это был один swiper)?

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import './TabsSwiper.scss';
import { Navigation, Controller } from 'swiper/modules';
import { TabsSwiperPropsType } from 'src/common/types/componentsTypes';

const TabsSwiper: React.FC<TabsSwiperPropsType> = ({ handleTabClick, navPanel }) => {
  const [selected, setSelected] = useState('0');

  const selectSliderHandler = (index: string) => {
    setSelected(() => index);
  };
  console.log(selected + ' ' + 'selected');

  return (
    <div className="swipersContainer">
      <Swiper
        onSwiper={(e) => {
          console.log(e);
          e.slideTo(+selected);
        }}
        modules={[Navigation, Controller]}
        navigation
        loop
        onActiveIndexChange={function (e) {
          handleTabClick(e.realIndex.toString());
        }}
      >
        {navPanel.map((item) => {
          return (
              <SwiperSlide key={item.id} className="swiper-slide">
                <p>{item.label}</p>
              </SwiperSlide>
          );
        })}
      </Swiper>
      <Swiper
        className="freeModeSwiper"
        spaceBetween={10}
        modules={[Controller]}
        loop
        freeMode={true}
        slidesPerView={3}
        autoplay={{
          delay: 2500,
          disableOnInteraction: true,
        }}
      >
        {navPanel.map((item) => {
          return (
              <SwiperSlide
                key={item.id}
                className="freeMode"
                onClick={() => {
                  selectSliderHandler(item.id);
                }}
              >
                <p>{item.label}</p>
              </SwiperSlide>
          );
        })}
      </Swiper>
    </div>
  );
};

export default TabsSwiper;