My Swiper app doesn't apply fade effect in React

Question

So, here is my code below, I randomly set the images as backgrounds, everything works except fade effect. However it works if I drag the slide with a mouse but when I press navigation button, nothing happens. Not nothing actually - it allows to move to the next slide once, and then nothing happanes. The transition from that first slide by navigation button is going without fade effect as well.

import React from 'react';
import SwiperImagesStack from './media/swiper-images/SwiperImagesIndex';
import SwiperTexts from './SlideTexts';
import './css/MainSwiper.css';
import { Navigation, Pagination, EffectFade, Autoplay, A11y, } from 'swiper';
import { Swiper, SwiperSlide} from 'swiper/react';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';


export default function MainSwiper() {
  const CaseFotos = [19, 2, 3, 3, 5, 8, 8, 2, 1, 2, 4, 5, 4, 7, 18, 4, 5, 3, 6, 4, 3, 5];
  
   const mybg = (m, index) => {
    if (index === 0) {
      if ([10, 13].includes(m)) {
        return ({ backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
                  justifyContent: 'flex-end',
                  alignItems: 'flex-end' });
        }
      else if ([1, 4, 6, 11, 12, 15, 17, 18].includes(m)) {
        return ({ backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
                  justifyContent: 'flex-start',
                  alignItems: 'flex-end' });
        }
      else if ( m === 16) {
        return ({ backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
                  justifyContent: 'flex-end', 
                  alignItems: 'flex-start' });
      }
      else {
        return ({ backgroundImage: `url('${SwiperImagesStack[index][m]}')` });
      }
    }
    else {
      return ({ backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
    color: 'white' });
    }
  }


  return (
  
    <Swiper
        spaceBetween={30}
        slidesPerView={1}
        navigation={true}
        effect={"fade"}
        speed={1500}
        autoplay={{delay: 5500}}
        pagination={{
        clickable: true,
        }}
        loop={true}
        modules={[Navigation, Pagination, Autoplay, A11y, EffectFade]}
        className="MainSwiper"
      >
          
        {CaseFotos.map((n, index) => 
          <SwiperSlide className='SwiperSlide' key={`slide${index}`} id={`case${index}`} style={mybg(Math.floor(Math.random() * (n-1)), index)} >
            <div className='categoryWrapper'>
              <h2 className="case-text">
                <strong> {`${SwiperTexts[index]}`} </strong>
                  <button>
                    <span>
                      <span>
                        <span data-attr-span="See how">
                          See how
                        </span>
                    </span>
                    </span>
                  </button>
              </h2>
            </div>
          </SwiperSlide>)
        }
    </Swiper> 
  );
}

I've tried Swiper demo for fade in React , I've tried to replace the order of iported modules and components, nothing works.

Answer 1

Just add

import "swiper/css/effect-fade";" !!!!