Hey Getting this error when using Swiper

here is the error details

 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/swiper/swiper-react.mjs:122:94)
    at (rsc)/./node_modules/swiper/swiper-react.mjs (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/vendor-chunks/swiper.js:410:1)
    at __webpack_require__ (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/modules/home/components/hero/index.tsx:7:70)
    at (rsc)/./src/modules/home/components/hero/index.tsx (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/app/[countryCode]/(main)/page.js:808:1)
    at __webpack_require__ (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/[countryCode]/(main)/page.tsx:9:87)
    at (rsc)/./src/app/[countryCode]/(main)/page.tsx (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/app/[countryCode]/(main)/page.js:592:1)
    at Function.__webpack_require__ (/media/mazhar/working_material/client-work/new_egala/egalaspot_n-storefront/.next/server/webpack-runtime.js:33:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'TypeError',
  page: '/us'
}

And Code:

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react"
import Image from "next/image"
import "../../../../styles/SlideShow.module.css"
import { Autoplay, Pagination, Navigation } from "swiper/modules"

// Import Swiper styles
import "swiper/css"
import "swiper/swiper-bundle.css" // Ensure correct path to CSS file
import "swiper/css/pagination"
import "swiper/css/navigation"

interface Slider {
  id: number
  image: string
}

const sliders: Slider[] = [
  { id: 1, image: "@public/bg-img/slider2_20240715032150714.jpg" },
  { id: 2, image: "@public/bg-img/slider3_20240715032150854.jpg" },
  { id: 3, image: "@public/bg-img/slider4_20240715032150854.jpg" },
]

export default function Hero() {
  return (
    <Swiper
      slidesPerView={1}
      spaceBetween={0}
      loop={true}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }}
      pagination={{
        clickable: true,
        type: "fraction",
        dynamicBullets: true,
      }}
      navigation={true}
      modules={[Autoplay, Pagination, Navigation]}
      className="mySwiper cursor-pointer"
    >
      {sliders.map((slider) => {
        return (
          <SwiperSlide key={slider.id}>
            <Image
              src={slider.image}
              layout="responsive"
              width={1144}
              height={400}
              alt="Slide image"
            />
          </SwiperSlide>
        )
      })}
    </Swiper>
  )
}

Guide me on how I can resolve this issue, and let me know if I did something wrong?
Note: already tried remove node-modules and yarn install but didnt get any luck