Error when uploading image to firebase using react js

I am having issues uploading my picture to firebase, the problem seems to stem from [ firebase storage ] i’ve tried multiple iterations of it and still no luck.

in the console, i saw this error:

FirebaseError: Firebase: No Firebase App ‘[DEFAULT]’ has been created – call Firebase App.initializeApp() (app/no-app).

   import React, { useState, useEffect } from "react";
import { Paper } from "@mui/material";
//import axios from "axios";
import authHeader from "../../features/authentication/AuthHeader";
//import {storage} from "./firebase.js";
import {getStorage,ref,uploadBytes} from 'firebase/storage';

function UserProfile() {
  const [user, setUser] = useState({});

  async function fetchUser() {
    const response = await fetch("http://localhost:9005/getProfile", {
      headers: authHeader(),
    });
    const fetchedUser = await response.json();
    console.log(fetchedUser);
    setUser(fetchedUser);
  }

  useEffect(() => {
    fetchUser();
  }, []);

  //firebase upload
  const allInputs = { imgUrl: "" };
  const [imageAsFile, setImageAsFile] = useState("");
  const [imageAsUrl, SetImageAsUrl] = useState(allInputs);

  const handleImageAsFile = (e) => {
    const image = e.target.files[0];
    setImageAsFile((imageFile) => image);
  };

  const handleFireBaseUpload = e =>{
    e.preventDefault();
    console.log('uploading pic');
    if(imageAsFile===''){
      alert(`image format not supported${typeof(imageAsFile)}`);
    }

    const storage = getStorage();
    const storageRef = ref(storage,'tet');

    uploadBytes(storageRef,imageAsFile).then((snapshot)=>{
      alert('uploading');
    });
    //const uploadTask = storage.ref(`/images/${imageAsFile.name}`).put(imageAsFile);
  }
 

  return (
    <>
      

      <Paper
      
        elevation={6}
        style={{ margin: "10px", padding: "15px", textAlign: "left" }}
        key={user.user_id}
      >
      <div className="pfp">
          <form onSubmit={handleFireBaseUpload}>
            <input type="file" onChange={handleImageAsFile} />
            <p>hgk</p>
            <button>test</button>
          </form>
        </div>
        First Name: {user.firstName}
        <br />
        Last Name: {user.lastName}
        <br />
        Email: {user.email}
        <br />
        Phone: {user.phone}
      </Paper>
    </>
  );
}
export { UserProfile as default };

this is the firebase js

import {initializeApp} from "firebase/app";
import firebase from "firebase/compat/app"
import "firebase/storage" ;




const firebaseConfig = {
    apiKey: "AIzaSyB8vxklg6-m-G8vUYANQ45uzD4OTIa4gsQ",
    authDomain: "dart-cart-273ad.firebaseapp.com",
    projectId: "dart-cart-273ad",
    storageBucket: "dart-cart-273ad.appspot.com",
    messagingSenderId: "41403665604",
    appId: "1:41403665604:web:3cfb4b0c15e705451fcd91"
  };
  //initilize firebase
  firebase.initializeApp(firebaseConfig);

  const storage = firebase.storage();

  export{
    storage, firebase as default
  }