React App on Fargate is ignoring env variable - reactjs

Question

I deployed my React app and backend using Fargate with load balancers, I noticed my React app is using the wrong endpoint to access my API, it seems to be using the it's load balancer's DNS name as it's endpoint even though this endpoint is configured by using environment variables (On a React App, so this would be REACT_APP_API_URL).
On my local machine, this container works fine and is able to connect to my backend. Here it shows the correct endpoint.
If I were to run this same exact image in Fargate, the wrong endpoint is shown, this is actually the URL to visit my web app.
And I configured the correct endpoint in my task definition like so, it matches the correct endpoint shown in figure 1. I also made sure the service is using the latest task definition with this endpoint.
If needed this is my docker file.
# The first image is for compiling the client files, the second is for serving.
# BUILD IMAGE
FROM node:14-alpine as build-stage
WORKDIR /app
# Install dependencies
COPY package*.json ./
RUN npm install
RUN npm install cross-env -g
RUN npm install npm install #craco/craco -g
# Build
COPY . .
RUN npm run build
# -----------------------------------------------------------------------------
# SERVING IMAGE
FROM fitiavana07/nginx-react
# Copy built files
COPY --from=build-stage /app/build /usr/share/nginx/html
# 80 for HTTP
EXPOSE 80
# Run nginx
CMD nginx -g 'daemon off;'

Answer 1

Turns out I'm an idiot lol, you need a .env file at the root of your project, this means you can't pass environment variables to be docker image. I managed to overcome this by creating .env on my docker file like so.
# The first image is for compiling the client files, the second is for serving.
# BUILD IMAGE
FROM node:14-alpine as build-stage
WORKDIR /app
# Install dependencies
COPY package*.json ./
RUN npm install
RUN npm install cross-env -g
RUN npm install npm install #craco/craco -g
# Build
COPY . .
# Create a .env for react app
# Define a required build arg
ARG api_url
# Create a .env file
RUN touch .env
# Write the api url into the env file
RUN echo REACT_APP_API_URL=${api_url} > .env
RUN cat .env
RUN npm run build
# -----------------------------------------------------------------------------
# SERVING IMAGE
FROM fitiavana07/nginx-react
# Copy built files
COPY --from=build-stage /app/build /usr/share/nginx/html
# 80 for HTTP
EXPOSE 80
# Run nginx
CMD nginx -g 'daemon off;'
On my GitHub Actions, I use this action to dynamically set this build argument