Installed SwiperJs and having problems Importing pagination from modules

Installed SwiperJs and having problems Importing pagination from modules in my nextjs project. I get the error “Module not found: Package path ./modules is not exported from package”

I tried updating the module to the latest and forced installing package but still didnt get any results.

import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";


  <Swiper pagination modules={[Pagination]} className="mySwiper">
    {media?.map((media, idx) => (
      <SwiperSlide key={idx}>
        <Image
          className="rounded-lg"
          src={media?.url}
          alt={"variant Media"}
          width={50}
          height={30}
        />
      </SwiperSlide>
    ))}
  </Swiper>

Try adding “use client;” to the top of the component where you are using Swiper, and also include the pagination module in your imports as shown. Check Docs for more info

"use client";
import { Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import 'swiper/css';
// Pagination module
import 'swiper/css/pagination';
// or import 'swiper/modules/pagination/pagination.scss'; 

// use below
<Swiper
     pagination={{ type: "bullets" }}
     modules={[Pagination]}
    >
    .....