Map the docker compose volume from container to host is not working

Question

I have a very simple nextjs application where I have two folders which I like to map to the host (developer system) while I deploy this application inside docker (I use docker-desktop).

1. Data folder (It has some json files and also some nested folders and files)
2. Public folder (It has nested folders too but It contains images)

I have tested in local and also inside the docker container (without volume and all) - It's all functioning.

As a next step - I want to use the Volume with my docker-compose file so that, I can bind these directories inside the container with the source (and going forward with AKS file storage options).

I have tried with multiple approaches (also checked some of the answers in stackoverflow) but it does not help to achieve the same result.

Here is my docker-compose file for your reference.

version: '3.4'
services:
  portfolio:
    image: ${DOCKER_REGISTRY-}brij1111-portfolio
    build:
      context: ./APP-03/clientapp
      dockerfile: dockerfile
    volumes:
      - /app/node_modules
        # anonymous volume only for node_modules

      - portfolio_data:/app/data
        # named volume inside which the nextjs app writes content to the file

volumes:
portfolio_data:
  driver: local
  driver_opts:
    o: bind
    type: none
    device: /APP-03/clientapp/data 
            # I have tried here to give a full path like /mnt/c/work/.../APP-03/clientapp/data but that also not working.

using docker-desktop I can see the volume indeed created for the container and it has all the files. However, It does not get reflected in my source if anything is updated inside that volume (like I add some content through nextjs application to that file it does not get reflected inside the running container).

in case, someone wants to know my folder hierarchy and where am i running docker-compose file, here is that reference image.