Next.js Error: Cannot read properties of undefined (reading 'collection')

I' just recently started next.js.I want to create a facebook clone by watching youtube tutorials but it keep poping out the error Cannot read properties of undefined (reading 'collection'). I did yarn add firebase ,also changed my firebase version to firebase v8

Here is my firebase.js

import "firebase/storage";
import firebase from "firebase/app";

const firebaseConfig = {
  apiKey: "my_key",
  authDomain: "my_domain",
  projectId: "my_id",
  storageBucket: "my_storage_bucket",
  messagingSenderId: "my_message_send",
  appId: "my_app_id"
};

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


const db = app.firestore();
const storage= firebase.storage();

export { db, storage }; 

InputBox.js //here error comes

import Image from 'next/image';
import { useSession } from 'next-auth/client';
import { EmojiHappyIcon } from "@heroicons/react/outline";
import { CameraIcon,VideoCameraIcon } from "@heroicons/react/solid";
import{  useRef } from "react";
import { db } from "firebase/app";
import firebase from "firebase/app";
function InputBox() {
    const [session]=useSession();
    const inputRef=useRef(null);

    const sendPost = (e) => {
      e.preventDefault();
    

    if(!inputRef.current.value) return;
//error
    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="";
    };


    return (
        
        <div className="bg-white rounded-2xl shadow-md mt-6 font-medium text-gray-500 p-2 " >
            <div className="flex space-x-4 p-4 items-center">
                <Image
                className="rounded-full"
                src={session.user.image}
                width={40}
                height={40}
                layout="fixed"
                />
                <form className=" flex flex-1">
                    <input
                    className="rounded-full h-12 bg-gray-100 flex-grow px-5
                    focus:outline-none"
                    type="text"
                    ref={inputRef}
                    placeholder={`Whats on Your mind ,${session.user.name}?`}
                    />
               
                <button  hidden type="submit" onClick={sendPost}
                >submit</button>
                </form>
                </div>
                <div className="flex justify-evenly p-3 border-t ">
                    <div className="inputIcon">
                        <VideoCameraIcon className="h-7 text-red-500"/>
                        <p className="text-xs sm:text-sm xl:text-base">Live Vedio</p>
                    </div>

                    <div className="inputIcon">
                        <CameraIcon className="h-7 text-green-400" />
                        <p className="text-xs sm:text-sm xl:text-base">Photo/Vedio</p>
                    </div>

                    <div className="inputIcon">
                        <EmojiHappyIcon className="h-7 text-yellow-300" />
                        <p className="text-xs sm:text-sm xl:text-base" > Feeling/Activity
                        </p>        
                    </div>
                </div>

           
        </div>
      )
    
}
export default InputBox