FirebaseError when using jest to test React and Firebase apps

I am trying to do a React test using Jest, but I get the following error.

FirebaseError: projectId must be a string in FirebaseApp.options
      14 | });
      15 | 
    > 16 | export const db = firebase.firestore();
         |                            ^
      17 | export const auth = app.auth();
      18 | export default app;
      19 | export const timestamp = firebase.firestore.FieldValue.serverTimestamp();

      at new FirestoreError (node_modules/@firebase/firestore/src/util/error.ts:216:5)
      at Function.Object.<anonymous>.Firestore.databaseIdFromApp (node_modules/@firebase/firestore/src/api/database.ts:618:13)
      at new Firestore (node_modules/@firebase/firestore/src/api/database.ts:378:36)
      at node_modules/@firebase/firestore/index.node.ts:41:12
      at Component.instanceFactory (node_modules/@firebase/firestore/src/config.ts:78:16)
      at Provider.Object.<anonymous>.Provider.getOrInitializeService (node_modules/@firebase/component/src/provider.ts:194:33)
      at Provider.Object.<anonymous>.Provider.getImmediate (node_modules/@firebase/component/src/provider.ts:95:29)
      at FirebaseAppImpl.Object.<anonymous>.FirebaseAppImpl._getService (node_modules/@firebase/app/src/firebaseApp.ts:127:54)
      at FirebaseAppImpl.firebaseAppImpl.<computed> [as firestore] (node_modules/@firebase/app/src/firebaseNamespaceCore.ts:228:29)
      at Object.firestore (node_modules/@firebase/app/src/firebaseNamespaceCore.ts:209:46)
      at Object.<anonymous> (src/firebase.jsx:16:28)
      at Object.<anonymous> (src/components/HeaderRight.jsx:3:1)
      at Object.<anonymous> (src/components/HeaderRight.test.js:2:1)

It says that the projectId must be a string, so I tried adding "" to the right side of the REACT_APP_FIREBASE_PROJECT_ID in the .env file, but that didn't work.

The following is my test file.

import { HeaderRight } from "./HeaderRight";

test("HeaderRight", () => {
  expect(1+1).toBe(2);
});

If I were to comment out the part where I import HeaderRight, the test would pass. But if I import, it fails.

I also tried the npm install, but it didn't work

The following is my package.json and firebase.jsx.

{
  "name": "firebase-react-auth",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "jest": {
    "testEnvironment": "jest-environment-jsdom-sixteen"
  },
  "dependencies": {
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.2",
    "firebase": "^7.20.0",
    "firebase-admin": "^9.3.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-test-renderer": "^17.0.1",
    "uuid": "^8.3.1",
    "why-did-you-update": "^1.0.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject",
    "format": "prettier --write 'src/**/*.js'"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-react-jsx": "^7.12.7",
    "@firebase/testing": "^0.20.11",
    "babel-jest": "^26.6.3",
    "enzyme": "^3.11.0",
    "firebase-tools": "^8.15.1",
    "jest": "^26.6.3",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "prettier": "^2.2.1"
  }
}

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { firestore } from "firebase";

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
});

export const db = firebase.firestore();
export const auth = app.auth();
export default app;
export const timestamp = firebase.firestore.FieldValue.serverTimestamp();

I did a lot of research on this error and could not come up with a good answer. If you know something about it, I'd like to know. Thank you for your help.