Network created by compose file inaccessible

Hi guys, I am trying to learn Docker. I’ve created a Compose file that connects 2 directories on my host machine. One directory/container is the React web client, and the other is the Rails API. So far, the server seems to be starting up successfully (although the web client is, weirdly, on another port than the one I specified). The problem is when I try to access either the client or the API through their localhost ports, it fails to connect.

Here are my two Dockerfiles, and also my docker-compose.yaml.

The Rails API Dockerfile:

FROM ruby:2.7.2
WORKDIR .
COPY . ./
RUN bundle install
EXPOSE 3003
CMD ["rails s"]

And then the React Dockerfile:

FROM node:13.12.0-alpine
WORKDIR .
ENV PATH ./node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install 
COPY . ./
EXPOSE 3001
CMD ["npm", "start"]

And here is the docker-compose.yaml file:

version: "3.9"
services:
  fight-club:
    build: ./fight-club/.
    ports:
      - "3001:3001"
    volumes:
      - .:/code
    image: "src_fight-club"
  fight-club-api:
    build: ./fight-club-api/.
    ports:
      - "3003:3003"
    volumes:
      - .:/code
    image: "src_fight-club-api"

Here is the console upon running docker compose up.

Any ideas what the problem might be?