I am coding along on a FB clone tutorial. The issue is that I'm doing it in 2022, so a lot of updates need to be implemented. I'm really new to firebase, so i do need some help on this.

my firebase.js

import firebase from 'firebase';
import 'firebase/storage';

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "AIzaSyDNCuXEn5todyFVWl6CLJaNridOkTxLi1o",
    authDomain: "fbclone-b8dca.firebaseapp.com",
    projectId: "fbclone-b8dca",
    storageBucket: "fbclone-b8dca.appspot.com",
    messagingSenderId: "366781998977",
    appId: "1:366781998977:web:84791acf7d270c5fdbaa80"
};

// // Initialize Firebase
// const app = initializeApp(firebaseConfig);

const app = !fireBase.apps.length ? fireBase.initializeApp(firebaseConfig) : fireBase.app;

const db = app.firestore();

const storage = fireBase.storage();

export {db, storage}

my inputbox.js

import { useSession } from "next-auth/react"
import Image from "next/image"
import { CameraIcon, EmojiHappyIcon, VideoCameraIcon } from "@heroicons/react/solid";
import {useRef} from 'react'
import {db, storage} from '../fireBase';

const InputBox = () => {
    const {data: session} = useSession();
    const inputRef = useRef(null);

    const sendPost = (e) => {
        e.preventDefault();
        if (!inputRef.current.value) return;

        db.collection("posts").add({
                message: inputRef.current.value,
                name: session.user.name,
                email: session.user.email,
                image: session.user.image,
                timestamp: firebase.firestore.FieldValue.serverTimestamp(),
            })

        inputRef.current.value = ""
    }

this is the error that i get:

./fireBase.js:1:0
Module not found: Package path . is not exported from package /home/alondrob/code/labs/projects/fbclone/node_modules/firebase (see exports field in /home/alondrob/code/labs/projects/fbclone/node_modules/firebase/package.json)
> 1 | import firebase from 'firebase';
  2 | import 'firebase/storage';
  3 | 
  4 | // Your web app's Firebase configuration

Import trace for requested module:
./components/InputBox.js
./components/Feed.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found

I know the import syntax has changed and i tried few things like

// Initialize Cloud Firestore through Firebase
import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"
const firebaseApp = initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

const db = getFirestore();

I just not sure how to configure it all together.