I've had this error for a couple of days now and I don't know how to fix it. This is my first time using Firebase so I'm not really used to it. Here's code from the component that's causing the error

import React, {useState, useEffect} from 'react';
import './Feed.css'
import StoryReel from './StoryReel';
import MessageSender from './MessageSender';
import Post from './Post';
import db from './firebase'
import {onSnapshot} from 'firebase/firestore'

function Feed() {
    const [posts, setPosts] = useState([])

    useEffect(() => {
        db.collection('posts')
            .orderBy('timestamp', 'desc')
            .onSnapshot((snapshot) =>
                setPosts(snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data() })))
            );
    }, []);

    return (
            <div className='feed'>
                <StoryReel />
                <MessageSender />

                {posts.map((post) => (
                    <Post
                        key={post.id}
                        profilePic={post.data.profilePic}
                        message={post.data.message}
                        timestamp={post.data.timestamp}
                        username={post.data.username}
                        image={post.data.image}
                    />
                ))}
            </div>
        );
}

export default Feed;

and code from the component where I initialized Firebase in React.

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import {getFirestore} from 'firebase/firestore';

const firebaseConfig = {
    ...
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export default getFirestore();

Any ideas on what I need to change?