Issues with Thumbs in SwiperWebComponent and React

[Maria0701]

Trying to make swiper web components to work in React. I need to create image carousel with thumbs and custom navigation. I used tutorial from the official documents https://swiperjs.com/element but cross-control for thumbs and main gallery still does not work/ Here is the code

import { useEffect, useRef } from 'react';
import { register } from 'swiper/element/bundle';
import type { Swiper } from 'swiper';

export const SwiperGallery= (props: any) => {
 const swiperRef = useRef<Swiper | any>(null);

 const {
   children,
   ...rest
 } = props;

 useEffect(() => {
   register();

   const params = {
     ...rest
   };
   Object.assign(swiperRef.current, params);
   swiperRef.current.initialize();
 }, []);

 return (
   <swiper-container ref={swiperRef}>
     {children}
   </swiper-container>
 );
};

export const SwiperSlide = (props: any) => {
  const {
    children,
    ...rest
  } = props;

  return (
    <swiper-slide {...rest}>
      {children}
    </swiper-slide>
  );
};

import { useState, useRef, useEffect } from 'react';
import { BtnBtn, SvgElt } from 'shared/ui';
import { ProgressiveImage } from 'shared/ui/progressiveImage';
import { SwiperGallery } from "features/carousel/Swiper"
import { SwiperSlide } from "features/carousel/SwiperSlide"
import { Navigation, Thumbs, Controller } from 'swiper/modules';
// import type { Swiper } from 'swiper';

export const Carousel = ({
  images, 
  hotelName
}: {images: string[]; hotelName: string;}) => {
  const navigationPrevRef = useRef(null)
  const navigationNextRef = useRef(null)

  let params = {
    modules: [Navigation, Thumbs, Controller],
    preloadImages: false,
    lazy: true,
    navigation: {
      prevEl: navigationPrevRef.current,
      nextEl: navigationNextRef.current,
    },
  };

  let thumbsParams = {
    modules: [Controller],
    slideToClickedSlide: true,
    slidesPerView: 3,
    spaceBetween: 16,
    breakpoints:{ 768: { direction: 'vertical' } },

  };


  return (
    <div className="hotel-item__slider hotel-slider">
    <div className="hotel-slider__slider">
      <div className="hotel-slider__wrapper-inside">
        <SwiperGallery 
        className="hotel-slider__wrapper" 
        thumbs-swiper=".my-thumbs"
        class="swiper-1" controller-control=".swiper-2"
        {...params}>
          {images.map((item, id) => (
            <SwiperSlide 
              class="hotel-slider__item" 
              key={id} 
            >
              <ProgressiveImage 
                src={item} 
                alt={hotelName} 
                width="464" 
                height="452" 
                className="hotel-slider__item-img"
              ></ProgressiveImage>
            </SwiperSlide>
          ))}
        </SwiperGallery>
      </div>
      <div className="hotel-slider__thumbs">
          <div className="hotel-slider__thumbs-inside">
            <SwiperGallery
              className="hotel-slider__thumbs-wrapper my-thumbs" 
              class="swiper-2" controller-control=".swiper-1"
              {...thumbsParams}
            >
              {images.map((item, id) => (
                <SwiperSlide 
                  class="hotel-slider__thumb" 
                  key={id} 
                >
                  <ProgressiveImage 
                    src={item} 
                    alt={hotelName} 
                    width="98" 
                    height="97" 
                    className="hotel-slider__item-img"
                  ></ProgressiveImage>
                </SwiperSlide>
              ))}
            </SwiperGallery>
          </div>
      </div>
      <div className="hotel-slider__controls">
        <button className="hotel-slider__control btn btn--left" ref={navigationPrevRef}>
          <SvgElt width="16" height="16" name='ChevronLeft' />
        </button>
        <button className="hotel-slider__control btn btn--right" ref={navigationNextRef}>
        <SvgElt width="16" height="16" name='ChevronRight' />
        </button>
      </div>
    </div>
  </div>
  )
};

Pls, help to find why the official way to synchronize gallery and thumbs does not work

[DrMoshtael]

I'd like an answer too. I assumed the only change from the official demo would be to useRef instead of a CSS class selector when setting the thumbs-swiper of swiper-container. But nothing seems to happen.