How to Fix ERR_NAME_NOT_RESOLVED When Dockerized Frontend Calls Backend

I'm working with a Docker setup that has three containers: one for Vite (the frontend), one for Node (the backend), and one for MongoDB. When my frontend attempts to make a GET request to the backend at `http://mern-backend:4531/api/workouts`, I encounter the error `net::ERR_NAME_NOT_RESOLVED`. However, when I use `wget http://mern-backend:4531/api/workouts` from within the CLI of the frontend container, it works perfectly and returns the JSON response as expected. I'm using the following fetch function in my Vite code:

```javascript
async function fetchWorkouts () {
const response = await fetch(`http://mern-backend:4531/api/workouts`);
const json = await response.json();
if (response.ok) {
setWorkouts(json);
}
}
```

Also, for context, the backend connects to the MongoDB database fine with this line:
`mongoose.connect("mongodb://testuser:testpassword@mern-database:27017")`.

Here's my `compose.yaml` for reference:

```yaml
services:
frontend:
container_name: mern-frontend
build:
context: ./frontend
dockerfile: dockerfile
target: runner
env_file:
- ./frontend/.env.prod
ports:
- 8080:8080
backend:
container_name: mern-backend
build:
context: ./backend
dockerfile: dockerfile
target: runner
env_file:
- ./backend/.env.prod
ports:
- "4531:4531"
mongodb:
image: mongo:8.0.20
container_name: mern-database
ports:
- "27017:27017"
env_file:
- ./mongodb/.env
volumes:
- mongodb-data:/data/db
volumes:
mongodb-data:
```

Any guidance on why this ERR_NAME_NOT_RESOLVED error is happening on the frontend would be greatly appreciated!