How to read env variable in react js during runtime in docker

This is my first time in dockerizing a react app. Which will be later deployed on multiple servers. I have a backend application in DRF and in production the url will change. So i don't want to hard code the api url to my react app instead it should be able to fetch the api url from the env file during run time.

How can i do it ? i tried to take the api url from .env file using process.env but the api url is getting hard coded during build time and i dont want to rebuild the image every time the backend is deployed to a different server.

below is my code :

.env

REACT_APP_BACKEND_URL=https://backend

where backend is the container name of backend code.

docker-compose.yml

nginx:
    build:
      context: .
      dockerfile: Dockerfile_ng
    container_name: ng01
    restart: always
    ports:
      - "443:443"
      - "80:80"
    depends_on:
      - backend
    env_file:
      - .env

React component to connect to backend :

import axios from "axios";
const apiurl = process.env.REACT_APP_BACKEND_URL;
export async function authentication(token) {
  return await axios({
    method: "post",
    url: apiurl + "/api/auth/",
    data: {
      token: token,
    },
  });
}

So wherever i deploy this container, it should take the api url value from env file which will be outside the container. Any help is immensely appreciated