Best way to manage env variables for multiple environments - reactjs

Question

So, we have a React project. We have 3 branches: development, qa and staging. This is the code for the API URL in the 3 envs:
development:
const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-development.com/api' : '/api';
qa:
const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-qa.com/api' : '/api';
staging:
const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-staging.com/api' : '/api';
Of course this has a problem: we have this conflict everytime we move things between environments.
So I want to move this to ENV variables.
But I have some doubts about how to implement it. I have some questions.
Option 1: have three .env files (.env.development, .env.qa, .env.staging) each one with the correct URL, push this file to the three branches, and then add scripts to start the project like npm start development or npm start qa.
Option 2. have only one .env file and don't push it to the project, make it static for every environment. This would mean having to manually change the endpoint url everytime I switch branches when developing.
Is there a better option?

Answer 1

Option 1 with some change will do the job. Keep 3 environment files and instead of using them in 3 branches, keep 3 npm tasks for start and build. While building ,keeping separate folders will be useful. Let me know if you need examples for this idea. I am using env-cmd to hook my .env files to my tasks.
Update:
Below is my scripts from Package.json, where I have 2 environments test and production,
"scripts": {
"start": "set PORT=41100 && env-cmd -f .env.test react-scripts start",
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
"build:test": "env-cmd -f .env.test npm run-script build && DEL /S /Q test && move build test",
"build:production": "env-cmd -f .env.production npm run-script build && DEL /S /Q production && move build production",
"test": "react-scripts test",
"format": "prettier --write src/**/*.ts{,x}",
"lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
},
I am using Windows for development. If you are not this post may help to adjust your scripts,
Use custom build output folder when using create-react-app
Configurations flies are .env.test and .env.production and contents will look like,
REACT_APP_SOME_API = "https://myurl/api/resource"