How to use environment variables in React app (static web app) hosted in Azure

Question

I'm learning about React and authentication using MSAL and deploying a static web app in Azure.

I have authConfig.ts:

import { Configuration } from "@azure/msal-browser";

// Config object to be passed to Msal on creation
export const msalConfig: Configuration = {
    auth: {
        clientId: `${process.env.REACT_APP_AAD_UI_APP_CLIENT_ID}`,
        authority: `https://login.microsoftonline.com/${process.env.REACT_APP_AAD_APP_TENANT_ID}`,
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    }
};

// scopes
export const loginRequest = {
    scopes: [`api://${process.env.REACT_APP_AAD_API_APP_CLIENT_ID}/user_impersonation`]
  };

// endpoints 
export const config = {
    endpoint: `${process.env.REACT_APP_AAD_APP_SERVICE_BASE_URI}/api/v1/items`
};

I also created a few files:

.env.INT

REACT_APP_AAD_UI_APP_CLIENT_ID= UI-ID-OF-INT
REACT_APP_AAD_API_APP_CLIENT_ID= API-ID-OF-INT
REACT_APP_AAD_APP_TENANT_ID= TENANT-ID-OF-INT
REACT_APP_AAD_APP_SERVICE_BASE_URI= https://int.azurewebsites.net

.env.UA

REACT_APP_AAD_UI_APP_CLIENT_ID= UI-ID-OF-UA
REACT_APP_AAD_API_APP_CLIENT_ID= API-ID-OF-UA
REACT_APP_AAD_APP_TENANT_ID= TENANT-ID-OF-UA
REACT_APP_AAD_APP_SERVICE_BASE_URI= https://ua.azurewebsites.net

.env.PROD

REACT_APP_AAD_UI_APP_CLIENT_ID= UI-ID-OF-PROD
REACT_APP_AAD_API_APP_CLIENT_ID= API-ID-OF-PROD
REACT_APP_AAD_APP_TENANT_ID= TENANT-ID-OF-PROD
REACT_APP_AAD_APP_SERVICE_BASE_URI= https://prod.azurewebsites.net

How does it pick the values from the right environment file and does the authentication?

Let's say if I deploy this to INT environment, how does it pick the values from .env.INT and does the authentication?

I'm a bit lost here! How can I use environment variables in my React app?

Thanks!