Why hot reload on my react project is so slow in docker?

Question

I need to wait for 10-20 seconds before seeing the updated result. I wonder why? I used two ways to do the hot reload, one with docker run, the other with docker compose both are slow. My folder structure is like:

--Folder
----node_modules/
----src/
----Dockerfile
----docker-compose.yaml

This is the Dockerfile:

# Use an official Node.js runtime as the base image
FROM node:alpine AS development

# ENV CI=true

# Set the working directory within the container
WORKDIR /app

# Install pnpm globally within the container
RUN npm install -g pnpm

# Copy package.json and package-lock.json to the container
COPY package.json pnpm-lock.yaml ./

# Install project dependencies using pnpm
RUN pnpm install

# Copy the rest of the application files to the container
COPY . .

EXPOSE ${PORT}

# Start the application
CMD ["pnpm", "start"]

# The builder stage
FROM development AS builder

RUN pnpm run build

# The production stage
FROM nginx:alpine AS production

COPY --from=builder /app/build /usr/share/nginx/html

ENTRYPOINT ["nginx", "-g", "daemon off;"]

After building the image, I use the command to run the container with hot reload:

docker run -it  -p 3008:3008 -v $PWD:/app -v /app/node_modules imageName

Changes made in the host takes more than 10 seconds to show up.

Alternatively, I tried docker compose up as well, similar results, the change doesn't reflect on the UI immediately. My compose.yaml looks like this:

version: '3'
services:
  web_app:
    build:
      context: .
      dockerfile: Dockerfile
      target: development
    ports:
      - "${PORT}:${PORT}" 
    stdin_open: true
    tty: true
    volumes:
      - .:/app
      - exclude:/app/node_modules/
    environment:
      - WATCHPACK_POLLING=true
volumes:
  exclude:

What is wrong with my configs?