No Firebase App '[DEFAULT]' has been created と怒られた

環境

• React.js
• TypeScript
• Firebase

怒られたコード

main.tsx

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

const config = {
    apiKey: "<API_KEY>",
    authDomain: "<AUTH_DOMAIN>",
    databaseURL: "<DATABASE_URL>",
    projectId: "<PROJECT_ID>",
    storageBucket: "<STORAGE_BUCKET>",
    messagingSenderId: "<MESSAGING_SENDER_ID>",
    appId: "<APP_ID>",
    measurementId: "<MEASUREMENT_ID>"
}
firebase.initializeApp(config)

ReactDOM.render(<App />, document.getElementById("root"))

App.tsx

import React from "react"
import * as firebase from "firebase"

const firestore = firebase.app().firestore()

export default function App() {
    return (
        <h1>Hello, World!</h1>
    )
}

動いたコード

firebase.initializeApp() を import の前に書いた。

main.tsx

const config = {
    apiKey: "<API_KEY>",
    authDomain: "<AUTH_DOMAIN>",
    databaseURL: "<DATABASE_URL>",
    projectId: "<PROJECT_ID>",
    storageBucket: "<STORAGE_BUCKET>",
    messagingSenderId: "<MESSAGING_SENDER_ID>",
    appId: "<APP_ID>",
    measurementId: "<MEASUREMENT_ID>"
}
firebase.initializeApp(config)

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

App.tsx

import React from "react"
import * as firebase from "firebase"

const firestore = firebase.app().firestore()

export default function App() {
    return (
        <h1>Hello, World!</h1>
    )
}

原因

import の段階で App.tsx 内の const firestore = firebase.app().firestore() が実行されたのかも
詳しくはわからない