"Uncaught ReferenceError: process is not defined" при попытке использовать dotenv в приложении create-response-app

В репозитории https://github.com/khpeek/trailmaps у меня есть пример карты Google, созданной с помощью react-google-maps, в которой опора googleMapUrl содержит мой ключ API Карт Google. В соответствии с 12-факторными принципами, я хотел бы переместить этот ключ API в файл .env и вставить его в URL-адрес.

Я пытаюсь следовать инструкциям модуля dotenv (который поставляется вместе с create-react-app) и попытался сделать следующее:

import React, { Component } from 'react';
import './App.css';
import MapWithGroundOverlay from './components/groundOverlay';
require('dotenv').config()

class App extends Component {
  render() {
    return (
      <div className = "App">
        <header className = "App-header">
          <h1 className = "App-title">Custom Overlay</h1>
          <h1 className = "App-title">{`The API key is ${process.env.GOOGLE_MAPS_API_KEY}`}</h1>

        </header>
        <MapWithGroundOverlay
          googleMapURL = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBimnrhiugaGSNN8WnsjpzMNJcrH_T60GI&v=3.exp&libraries=geometry,drawing,places"
          loadingElement = {<div style = {{ height: `100%` }} />}
          containerElement = {<div style = {{ height: `400px` }} />}
          mapElement = {<div style = {{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default App;

В корневом каталоге я создал файл .env, в котором я определяю GOOGLE_MAPS_API_KEY. Однако, если я npm start приложение и перехожу к localhost:3000, я получаю, что process не определен:

Согласно Uncaught ReferenceError: процесс не определен, код Node.js должен запускаться процессом Node, а не браузером; по-видимому, это то, что я делаю не так. Однако я нахожу этот ответ немного высокоуровневым, чтобы сразу же применить его здесь. Ясно, что dotenv должен использоваться с create-react-app, иначе он не будет поставляться вместе с ним, но должен ли я использовать его в этом примере?