Swiper.js React Component I want multiple swiper instances on a single page?

Question

I am attempting to add multiple instances of swiper on a single react page. I am getting the error Swiper cannot be invoked without 'New'.

I want them to navigate separately and be unique from each other.

Can anyone guide me to a solution. I have been stuck for a while now.

Here is the Page.js

import React from 'react'
import HomepageCarousel from '../components/homepage/HomepageCarousel'
import HomepageServices from '../components/homepage/HomepageServices'


const Home = () => {
  return (
    <div>
      <HomepageCarousel/>
      <HomepageServices/>
    </div>
  )
}

export default Home

Here is the react component HomePageCarousel

import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import HomepageSlide from "./HomepageSlide";
import { Pagination, Navigation} from "swiper";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.css";

const HomepageCarousel = () => {
  return (
    <Swiper
      slidesPerView={1}
      modules={[Pagination, Navigation]}
      pagination={{ clickable: true }}
      className="homepage-carousel"
      navigation={true}
      loop={true}
    >
      <SwiperSlide>
        <HomepageSlide />
      </SwiperSlide>
      <SwiperSlide>
        <HomepageSlide />
      </SwiperSlide>
      <SwiperSlide>
        <HomepageSlide />
      </SwiperSlide>
    </Swiper>
  );
};

export default HomepageCarousel;

'''


Here is the react component HomepageServices

'''
import React, { useState } from "react";
import HomepageServicesContent from "./HomepageServicesContent";
import Swiper from "swiper";
import { Controller } from "swiper";
import { SwiperSlide } from "swiper/react";

const HomepageServices = () => {
  return (
    <div className="homepage-services">
      <HomepageServicesContent
        header={"3D Design"}
        paragraph={
          "For Over Forty Years Craftsman Has Been The Leading Supplier Of Duty Free, Custom-Made, Retail Units To The International Travel Industry. Our Commitment To Quality And Excellence Has Been The Cornerstone Of Our Success, Consistently Delivering Top-Notch Products And Services To Our Clients. We Maintain An “Open Book” Policy With All Our Clients To Ensure That Communications Are Clear, Concise And In Line With Their Requirements. We Offer Ongoing, Inhouse And External, Training To All Our Employees To Ensure They Are Up To Date With The Latest Industry Solutions. At Craftsman, We Never Compromise On Client Satisfaction, Product Quality And Staff Welfare."
        }
      />
      <Swiper
        className="services-swiper"
      >
        <SwiperSlide></SwiperSlide>
      </Swiper>
    </div>
  );
};

export default HomepageServices;