Getting error after hot module reloading: Overwriting FirebaseError base field “name” can cause unexpected behavior.

import { initializeApp } from "firebase/app";
import firebaseConfig from "./config";

// load and apply firebase config
export default function initFirebaseApp(appName) {
  let app =  initializeApp(firebaseConfig, appName);
}

export { firebaseConfig };

import { hot } from "react-hot-loader/root";
import React from "react";
import debug from "debug";
import ...

import AppContext from "./AppContext";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.firebaseApp = initFirebaseApp(firebaseConfig.projectId);

    this.logger = debug(firebaseConfig.projectId);
    this.logger.log = console.log.bind(console);

    this.state = {
      ...
    };
  }

  componentWillUnmount() {
    // TODO: look up app.database.ref(...).off()

    firebase
      .delete(this.firebaseApp)
      .then(() => {
        console.log("App deleted successfully");
      })
      .catch(error => {
        console.log("Error deleting firebase app:", error);
      });
  }

  render() {
    return (
      <div>
        <AppContext.Provider
          value={...}
        >
          <Header />
          <main>
            ...
          </main>
        </AppContext.Provider>
      </div>
    );
  }
}

export default hot(App);