This docker compose.yml file

version: '3.8'
services:
  dashboard_client:
    image: azamatmoitech/moitech:colony_client_v2.5
    ports:
      - '8101:80'
    restart: always

This is Docker file

# Stage 1: Build the React app
FROM node:20 as build

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies and clear npm cache
RUN npm install --force && npm cache clean --force

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Stage 2: Serve the React app using Nginx
FROM nginx:alpine

# Copy the build files from the previous stage
COPY --from=build /app/build /usr/share/nginx/html

# Copy the custom nginx configuration file
COPY nginx.conf /etc/nginx/nginx.conf

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

Nginx conf file

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        server_name localhost;

        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
}

Swiper functionality

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SensorMultyChart from '../../pages/dashboard/components/SensorMultyChart';
import { Box, Typography } from '@mui/material';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';

// import required modules
import { Navigation } from 'swiper/modules';

export default function CustomCarousel({ data }) {
  const breakpoints = {
    0: {
      slidesPerView: 1,
    },
    700: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 4,
    },
    3000: {
      slidesPerView: 5,
    },
  };

  return (
    <Swiper
      spaceBetween={10}
      breakpoints={breakpoints}
      loop={true}
      navigation={true}
      pagination={true}
      modules={[Navigation]}
    >
      {data.map((slideContent, index) => (
        <SwiperSlide key={index}>
          <Box sx={{ bgcolor: '#ffffff', p: 2, border: '1px solid #e0e0e0', borderRadius: 2 }}>
            <Typography sx={{ textAlign: 'center' }} variant='h6'>
              {slideContent.sensor}
            </Typography>
            <SensorMultyChart />
          </Box>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

I am working on a react project and using swiperjs for carousel functionality, When I built project manually, swiper styles are applying well, But When I dockerized the project, swiper styles are not working on a docker project. Thank you for your help!