Could not find a required file. Name: index.html in react with docker compose

I have my react app set up with create-react-app and I was trying to run it with Docker container and Docker compose.
However, I got the following error when I ran it with Docker compose.

web_1     | Could not find a required file.
web_1     |   Name: index.html
web_1     |   Searched in: /usr/src/app/web_client/public

I am using Windows 10 and Docker quickstart terminal

Here is my folder structure:

vocabulary-app
   |
    web_client
         |
          node_modules/
          public/
          src/
          package.json
          package-lock.json
          Dockerfile
          yarn.lock
    docker-compose.yml

Here is the content of docker-compose.yml

  ### Client SERVER ###
  web:
    build: ./web_client
    environment:
      - REACT_APP_PORT=80
    expose:
      - 80
    ports:
      - "80:80"
    volumes:
      - ./web_client/src:/usr/src/app/web_client/src
      - ./web_client/public:/usr/src/app/web_client/public
    links:
      - server
    command: npm start

Here is the Dockerfile

FROM node:9.0.0

RUN mkdir -p /usr/src/app/web_client
WORKDIR /usr/src/app/web_client

COPY . .

RUN rm -Rf node_modules

RUN npm install

CMD npm start

I also tried to explore the file system in docker and got the following result:

$ docker run -t -i vocabularyapp_web /bin/bash
[email protected]:/usr/src/app/web_client# ls
Dockerfile  node_modules       package.json  src
README.md   package-lock.json  public        yarn.lock
[email protected]:/usr/src/app/web_client# cd public/
[email protected]:/usr/src/app/web_client/public# ls
favicon.ico  index.html  manifest.json

This one basically means that the index.html file is there, so I got more confused about the error message.

Does someone have solution to this?

Source: StackOverflow