How to access .env variables from public folder - reactjs

I am trying to access the environment variables to the public folder in my react(CRA) application. I'm not sure if it is possible. I've read the docs in REACT however, my concern is not discussed there. My goal is to setup a dynamic firebase service worker based on the environment. (i.e. dev, test, prod).

on my firebase.js file inside the public folder, I tried calling the process.env.REACT_APP_API but got undefined. I tried the one on the React docs %PUBLIC_URL& still no luck.

this is the content of my firebase-messaging-sw.js file inside the public folder.

importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
    measurementId: process.env.REACT_APP_MEASUREMENT_ID
  };

  firebase.initializeApp(firebaseConfig);

Please advise. Thank you