React: FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created

Question

I got this error every time I try to log in, or just trying to connect to firebase, and I don't really know how could I fix this problem, I read that the cause could be with th timing, but I'm not sure what's the fix for this.

This is te Sing in part:

import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import ThirdPartySignIn from '../components/ThirdPartySignIn';import MailIcon from '../assets/mail-icon.svg';
import AppleIcon from '../assets/apple-icon.svg';
import GoogleIcon from '../assets/google-icon.svg';
import EyeIcon from '../assets/eye-icon.svg'

function SignIn() {
  const [showPassword, setShowPassword] = useState(false);
  const [userForm, setUserForm] = useState({
    email : '',
    password : ''
  });
  const {email, password} = userForm;

  const navigate = useNavigate();

  const changeData = (e) => {
    setUserForm(prevState => ({
      ...prevState,
      [e.target.id] : e.target.value
    }))
  }

  const onSubmit = async (e) => {
    e.preventDefault();
    try {
      const auth = getAuth();
      const userCredential = await signInWithEmailAndPassword(auth, email, password)
      
      userCredential.user && navigate('/home')
      console.log(userCredential)

    } catch (error) {
      console.log(error)
    }
  }

  const passVisibility = () => {
    setShowPassword(prevState => !prevState)
  }

  return (
    <main className='relative flex flex-col w-screen h-screen p-4 text-center items-center'>
      <h1 className='text-5xl text-rose-700 m-8 drop-shadow'>Sign in</h1>
      <form className="flex flex-col w-screen max-w-md items-stretch" onSubmit={onSubmit}>
        <input type="email" id="email" className='rounded-full px-6 py-4 mx-8 my-3 h-12 outline-none' placeholder='Email' value={email} onChange={changeData}/>
        <div className='flex flex-row relative rounded-full justify-between px-4 py-4 mx-8 my-3 h-12 focus:shadow-xl bg-white'>
          <input type={!showPassword ? 'password' : 'text'} id="password" className='outline-none ' placeholder='Password' value={password} onChange={changeData}/>
          <img src={EyeIcon} alt="show" className='w-1/12' onClick={passVisibility}/>
        </div>
        <Link to='/forgotpassword' className='opacity-50 text-xs text-left mx-12 underline'>Forgot password?</Link>
        <button type='submit' className='btn-primary m-8 h-12'>Sign in</button>
      </form>
      <p className='text-xl font-light opacity-50 leading-loose mb-3'>Sing in / Sing up using</p>
      <div className="flex flex-col w-screen max-w-md items-stretch">
      <ThirdPartySignIn svgSrc={MailIcon} brand='email' />
      <ThirdPartySignIn svgSrc={GoogleIcon} brand='google' />
      <ThirdPartySignIn svgSrc={AppleIcon} brand='apple' />
      </div>
    </main>
    );
}

export default SignIn;

And this is the firebase.config.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "*censored*",
  authDomain: "agenda-1fbfc.firebaseapp.com",
  projectId: "agenda-1fbfc",
  storageBucket: "agenda-1fbfc.appspot.com",
  messagingSenderId: "368995546450",
  appId: "*censored*"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

and this is the error log

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
        at getApp (api.ts:192:1)
        at getAuth (index.ts:37:1)
        at onSubmit (SignIn.jsx:29:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
        at invokeGuardedCallback (react-dom.development.js:4056:1)
        at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
        at executeDispatch (react-dom.development.js:8243:1)
        at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
        at processDispatchQueue (react-dom.development.js:8288:1)