I'm trying to initialize firebase in my App.js, so that I can utilize the user's auth state throughout multiple scenes. My Sign In/Sign Out logic is tied to 2 seperate button components that are conditionally rendered in my header.

I'm receiving this error, which leads me to believe that the buttons are using "firebase" before it's init'd.

Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).

App.JS

import React from 'react';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import Header from './components/core/Header';

firebase.initializeApp({...});

const App = () => (
  <div className="App">
    <Header />
  </div>
)

Is there a way I can initialize firebase to my whole application before the import of Header? Or can I not separate the signIn/Out logic from my App.js?