undefined environment variables in Reactjs

I am new to React and I want to use Evironment Variables in my App. I tried out many solutions from the web but nothing worked out so here is my configuration:
i created a process.env file in my root directory and inside this file I initialized my variables like this:

REACT_APP_SERVICE_ID=key
REACT_APP_TEMPLATE_ID=key_2
REACT_APP_API_KEY=key_3

after I called them in my component like so:

const serviceId = process.env.REACT_APP_SERVICE_ID;
const templateId = process.env.REACT_APP_TEMPLATE_ID;
const public_key = process.env.REACT_APP_API_KEY;

but when i log them, the console shows undefined. I also tried out using dotenv-webpack , even that doesn’t work.

>Solution :

rename the filename from process.env to .env