How to Enable Hot Reload for React App in Docker?

I'm new to using Docker and DevOps, and I'm currently working on containerizing a simple React quiz app that employs **json-server** to serve data from **data/questions.json**. I'm looking for a way to make live edits to my code—especially in the src, public, and data directories—and see those changes reflected immediately in the browser without having to rebuild the container every single time.

Here's a breakdown of my project structure:

- data
- questions.json
- public
- index.html
- src
- App.jsx
- components/
- index.js
- Dockerfile
- docker-compose.yaml
- .dockerignore
- package.json
- package-lock.json

In my Dockerfile, I set it up to copy the package.json files, install the dependencies, and start the app. Here's the relevant part of my docker-compose.yaml:

- I have two services, one for the backend and one for the frontend. Both containers should expose the necessary ports (8000 for the backend and 3000 for the frontend).
- The frontend is using a bind mount (.:/app) to ensure that changes to the local files reflect in the Docker container.

However, when I include the **volumes** line in the compose file, although Docker shows it's running, I can't access the frontend. It gives me an error saying 'This page isn't working' with an ERR_EMPTY_RESPONSE. When I remove the **volumes** line, everything runs fine, but I lose live reload.

What am I doing wrong, and how can I set it up so I can see changes live while the app runs in Docker without flipping back and forth with builds?