React build once and deploy anywhere configurable URL - reactjs

Question

For my react project I'm trying to implement a global configuration that can pickup deploy URLs or any other config variables based on different environments like development, staging, or production. Optionally, the base URL path can be fetched dynamically from a co-deployed file, such as const config = fetch('/config.json'). Precisely,
All invocations of the API obtain the base URL path from that one configuration location, no other hardcoded URL base paths should exist in the code.
The npm build process should start with npm run-script build ${ENV_BASED_API_URL}.
In short, I need a proper "build once, deploy anywhere" (aka no divergence between development and production) but also the flexibility to change which API the frontend talks to.
For the same, I tried some approach based on following references:
https://www.cotyhamilton.com/build-once-deploy-anywhere-for-react-applications/
https://hasniarif.io/handle-runtime-environment-in-react/ and some other SO references.
So, I created a config.js file in the /public folder of my react-app, whose content goes like this:
const rootUrl = `${location.protocol}//${location.host}`;
const envs = {
// Production
'http://localhost:6000': {
APP_ENV: 'production',
API_URL: 'https://api.example.io',
...some more other keys
},
// Staging
'http://localhost:5000': {
APP_ENV: 'staging',
API_URL: 'https://staging-api.example.com',
...some more other keys
},
// Development
'http://localhost:3000': {
APP_ENV: 'development',
API_URL: 'http://localhost:1080',
...some more other keys
},
};
if (envs[rootUrl]) {
// Set environment variables based on the URL the app is being accessed from
window.env = envs[rootUrl];
} else {
// Redirect to production if the rootUrl is unknown
window.location.replace(Object.keys(envs)[0]);
}
And the package.json is as:
"scripts": {
"start": "react-scripts start",
"postbuild": "react-scripts ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Now, I am unable to figure out how to implement the correct way to connect the config.js file with the package.json to create build dynamically & then deploy as per different APP_ENV and also handle configs from any part of the application.
If anyone please guide me how can I achieve this ?