My swipper next button is working in localhost but not in netlify deployed site

Question

The refs changes the slides. It is working fine in my localhost but when it is deployed in netlify this buttons does not change the slide. Below is my code.

import React, { useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper";
import { FaLessThan, FaGreaterThan } from 'react-icons/fa'

Here are the refs for the changing of the slides.

const ServiceSlider = () => {
const navigationPrevRef = useRef(null);
const navigationNextRef = useRef(null);
return (
    <div className='mt-24'>
        
        <div className='relative z-10 flex items-baseline space-x-3 h-[180rem] lg:h-auto'>

This is the previous button.

            <div ref={navigationPrevRef}>
                <button className='btn text-xs lg:text-base rounded-full bg-black'><FaLessThan /></button>
            </div>
            <Swiper
                spaceBetween={10}
                modules={[Navigation]}
                onBeforeInit={(swiper) => {
                    swiper.params.navigation.prevEl = navigationPrevRef.current;
                    swiper.params.navigation.nextEl = navigationNextRef.current;
                }}
                navigation={{
                    prevEl: navigationPrevRef.current,
                    nextEl: navigationNextRef.current,
                }}
                slidesPerView={1}
                className="mySwiper"
            >
                <SwiperSlide>
                    <Quality></Quality>
                </SwiperSlide>
                <SwiperSlide>
                    <Art2D></Art2D>
                </SwiperSlide>
                <SwiperSlide>
                    <Art3D></Art3D>
                </SwiperSlide>
            </Swiper>

Here is the next button.

            <div ref={navigationNextRef}>
                <button className='btn text-xs lg:text-base rounded-full bg-black'><FaGreaterThan /></button>
            </div>
        </div>
    </div>
);
};


export default ServiceSlider;