HTTP requests between docker containers-CodePudding

I have created two very simple containers to understand/test HTTP requests between containers, but for some reason, I just can't get my containers communicating. I keep getting GET http://backend:5000/ net::ERR_NAME_NOT_RESOLVED

My first container, a simple react app with no functionality, just gets container name from process.env.REACT_APP_URL, and makes a get request by fetch(http://${url}:5000/).

import { useState } from "react";

const MyComponent = () => {
  const [message, setmessage] = useState("Hello");

  async function buttonClick() {
    let url = process.env.REACT_APP_URL;

    try {
      let response = await fetch(`http://${url}:5000/`);
      console.log("This is response", response);
      setmessage(response.data);
    } catch (error) {
      console.log("error occured:", error);
    }
  }

  return (
    <>
      <p>{message}</p>
      <button onClick={buttonClick}>Click Me!</button>
    </>
  );
};

export default MyComponent;

My second container, again incredibly simple Flask app, with Hello World served in the homepage route, and nothing else.

from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/")
def hello_world():
    return jsonify("Hello World"), 200


if __name__ == '__main__':
    app.run(host="0.0.0.0")

And their corresponding docker files,

FROM node:17.4.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./

RUN npm install --silent
RUN npm install [email protected] -g --silent

# add app
COPY . ./

# start app
CMD ["npm", "start"]

FROM python:3.6.5-alpine

RUN apk update && apk upgrade && apk add gcc musl-dev libc-dev libc6-compat linux-headers build-base git libffi-dev openssl-dev

COPY . .

RUN pip install -r requirements.txt

CMD ["python", "./myfile.py"]

Finally, I am using docker-compose to orchestrate these containers:

version: "3"

services:
  backend:
    build:
      context: ./server
    container_name: backend
    expose:
      - 5000
    ports:
      - 5000:5000

  frontend:
    build:
      context: ./web
    container_name: frontend
    expose:
      - 3000
    ports:
      - 3000:3000
    environment:
      - REACT_APP_URL=backend
    depends_on:
      - "backend"
    links:
      - "backend:backend"

My file system is as follows:

/sample-app
    |_ server
    |_ web
    |_ docker-compose.yml

I have been trying to understand what I am doing wrong and I just can't find it. I appreciate any help.