swiper Effectcoverflow not working

[vijuvastrad]

i am trying to use swiper coverflow but its not working swiper 6.8.4

import React from "react";
import "./App.css";
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Scrollbar } from 'swiper';

import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.min.css";
import "swiper/components/navigation/navigation.min.css";
import SwiperCore, {EffectCoverflow,Pagination} from 'swiper';

function App() {
SwiperCore.use([EffectCoverflow,Pagination]);
const images = [
{
id: 1,
img: "https://swiperjs.com/demos/images/nature-1.jpg",
},
{
id: 2,
img: "https://swiperjs.com/demos/images/nature-2.jpg",
},
{
id: 3,
img: "https://swiperjs.com/demos/images/nature-3.jpg",
},
{
id: 4,
img: "https://swiperjs.com/demos/images/nature-4.jpg",
},
{
id: 5,
img: "https://swiperjs.com/demos/images/nature-5.jpg",
},
{
id: 6,
img: "https://swiperjs.com/demos/images/nature-6.jpg",
},
{
id: 7,
img: "https://swiperjs.com/demos/images/nature-7.jpg",
},
{
id: 8,
img: "https://swiperjs.com/demos/images/nature-8.jpg",
},
{
id: 9,
img: "https://swiperjs.com/demos/images/nature-9.jpg",
},
];
return (

<Swiper
modules={[
Navigation,
Pagination,
Scrollbar,
EffectCoverflow
]}
spaceBetween={50}
slidesPerView={4}
navigation={true}
autoplay
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
onSlideChange={() => console.log("slide change")}
onSwiper={(swiper) => console.log(swiper)}
effect="coverflowEffect"
grabCursor={true}
centeredSlides={true}
coverflowEffect={{
rotate: 50,
stretch: 0,
depth: 300,
modifier: 1,
slideShadows: true,
}}
className="swiper"
>
{images.map((i) => {
return (



);
})}

);
}

[GIDEON-BABALOLA]

Use this instead:
import {EffectCoverflow, Pagination, Navigation} from "swiper/modules"