Running multiple projects using docker with one docker-compose but can only reach the frontend project

I am having trouble setting docker to run 2 projects on a single container or on a single docker-compose.yml

So I am using php slim4 for the backend and frontend the main difference is frontend will use twig for the view. When I run them separately using their own docker-compose and nginx it works fine and no issue. But when i run it on a single docker-compose.yml which includes the frontend and backend. only the frontend works and everytime i try to do a call to the backend api i get bad gates or as if the frontend intervenes and says the route doesnt exist. localhost is fine but localhost/api/v1/test cannot reach as error message

homepage link: localhost
Fatal error: Uncaught SlimExceptionHttpNotFoundException: Not found. in /frontend/vendor/slim/slim/Slim/Middleware/RoutingMiddleware.php on line 76

I checked the container and it says everything is ok.

I am just trying to run it locally for now and this my set up

- project-directory
  - backend
    - docker
      - php
        - Dockerfile
        - php-fpm.conf
    - web
      - index.php
    - ... (other backend files and directories)
  - frontend
    - docker
      - php
        - Dockerfile
        - php-fpm.conf
    - web
      - index.php
    - ... (other frontend files and directories)
  - nginx
    - nginx.conf
  - docker-compose.yml

and in my docker-compose.yml

version: '3.9'

services:
  backend:
    container_name: backend
    build:
      context: ./backend
      dockerfile: ./docker/php/Dockerfile
    ports:
      - 9001:9000
    volumes:
      - ./backend:/backend

  frontend:
    container_name: frontend
    build:
      context: ./frontend
      dockerfile: ./docker/php/Dockerfile
    ports:
      - 9000:9000
    volumes:
      - ./frontend:/frontend

  nginx:
    image: nginx
    container_name: nginx
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - /etc/hosts:/etc/hosts        # Add this line
    ports:
      - 80:80
    depends_on:
      - backend
      - frontend

nginx.conf

events {
  worker_connections 1024;
}
http {
  upstream backend {
    server backend:9001;
  }

  upstream frontend {
    server frontend:9000;
  }

  server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    server_tokens off;

    root /frontend/web;
    index index.php;

   location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    location /api/v1 {
        proxy_pass http://backend:9001;
    }

    location ~ .php$ {
        include fastcgi_params;
        fastcgi_pass frontend;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
  }

  server {
    listen 80;
    server_name backend;

    root /backend/web;
    index index.php;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ .php$ {
        include fastcgi_params;
        fastcgi_pass backend;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
  }
}

dockerfile for frontend and it is the same for the backend but using ‘backend’

FROM php:8.2-fpm

# Install Xdebug
RUN pecl install xdebug 
    && docker-php-ext-enable xdebug

# Copy the php config file
COPY ./docker/php/php-fpm.conf /usr/local/etc/php-fpm.d/www.conf

# Copy the application code
COPY . /frontend

VOLUME ["/frontend"]

the php-fpm.conf is the same for both as i just copied it next to dockerfile for both frontend and backend

[www]
user = www-data
group = www-data

listen = 127.0.0.1:9000
pm = dynamic
pm.max_children = 5
pm.start_servers = 2
pm.min_spare_servers = 1
pm.max_spare_servers = 3

Really grateful if you could help me out, i have been stuck on this for a few days now. thank you