Anyone have an idea how can i fetch data from firestore?

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
    apiKey: "AIzaSyCNBAxjeKNoAPPjBV0JW4vZ0QaTaOx9-L4",
    authDomain: "tomaproject-6b82b.firebaseapp.com",
    projectId: "tomaproject-6b82b",
    storageBucket: "tomaproject-6b82b.appspot.com",
    messagingSenderId: "1041229848485",
    appId: "1:1041229848485:web:3678c821ef1bd3a9"
};

// Use this to initialize the firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);

// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();

export default { auth, db };

I am trying to fetch data using db.collection in useEffect function.

Error i keep getting : firebase__WEBPACK_IMPORTED_MODULE_6_.default.collection is not a function

Any suggestions?

import db from '../../firebase';

const HomeScreen = (props) => {

    const username = props.email
    return (
        <div className={styles['wrapper']}>
            <Container className={styles['wrapping-container']} >
                <h2 className={styles['Login-user-class-paragraph']}> Welcome {username}!</h2>
                <Row>
                    <Col md={2}>
                        <Container>
                            <SidePanel />
                        </Container>
        </div>
    )
}

export default HomeScreen;