heroku config variables are undefined - reactjs

Question

I have a React app that I am deploying with Heroku. It only has a frontend and no backend.
In my app, I have 3 environment variables for EmailJS: USER_ID, SERVICE_ID, TEMPLATE_ID.
Here are the places I use them:
index.html
<script type="text/javascript">
(function(){
emailjs.init("%USER_ID%");
})();
</script>
email.js
emailjs
.sendForm(
process.env.SERVICE_ID,
process.env.TEMPLATE_ID,
e.target,
process.env.USER_ID
)
I have read the documentation on heroku here which says I need to use the heroku CLI or the config variables setting in the heroku dashboard.
I have a .env file that I have for local development with all these variables defined. The variables are also undefined when I try locally with npm start.
When I use bash and type echo $SERVICE_ID I get the desired outcome.
I have tried both heroku CLI and the config variables setting in the heroku dashboard and the env variables are still undefined.
What might I be doing wrong? Please let me know if I am unclear or if you guys would like more info. Thanks!
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"axios": "^0.21.1",
"dotenv": "^8.2.0",
"emailjs-com": "^2.6.4",
"jquery": "^3.5.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-ga": "^3.3.0",
"react-scripts": "^4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Answer 1

I believe I fixed it.
I changed all of my env variables to start with REACT_APP_ which according to the react documentation, is the proper way to deal with env variables in react. I also used react-dotenv which #Hoobs recommended.