InvalidKeyMapError on load

InvalidKeyMapError on load - v2.1.2

I can't seem to load in the google map component. I've been getting the following browser console error message when I try to initialize my google maps component.

react_devtools_backend.js:2273 Google Maps JavaScript API error: InvalidKeyMapError
https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

Here's my source code:

const Map = () => {
  const map = (
    <GoogleMapReact
      bootstrapURLKeys={{ key: process.env.GMapKey }}
      defaultCenter={{ lat: 40.7128, lng: -74.006 }}
      defaultZoom={12}
    ></GoogleMapReact>
  );
  console.log(map);
  return <div style={{ height: '100vh', width: '100%' }}>{map}</div>;
};

I've confirmed that my environment variable is getting passed down as props on the Google map component. I've downgraded to a previous version of the module (1.1.7) that I've used in the past and it worked fine.

For additional context, here's my webpack config that I'm using:

const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');

dotenv.config();

module.exports = {
  entry: {
    main: './client/index.tsx',
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.GMapKey': JSON.stringify(process.env.GMapKey),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
        },
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader?name=assets/[name].[ext]',
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

One thing that I've noticed for the authentication request is that the query string for my api key has "undefined" appended to it. I haven't gotten a chance to explore this further but would greatly appreciate some guidance on this. Thank you in advance for your time.

https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Flocalhost%3A8081%2F&4sAIzaSyADmkzADVudWE7k2y257RrF5oIL5dD1x-Aundefined&callback=_xdc_._9kv60j&key={MY_KEY}undefined&token=11248

Environment:

OS: Windows
Browser: Chrome