Hello I am trying to configure react app with firebase and use firestore.

"firebase": "^9.1.3"

I followed the instructions given in official docs.

Here is my congig.js file.

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

const firebaseConfig = {
    apiKey: '****',    
    authDomain: '*****',    
    projectId: '*****',    
    storageBucket: '*****',    
    messagingSenderId: '****',    
    appId: '*****',
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

I am sure this gets initialized.

When I export it and use it in other file. collection is greyed out in vs code that means i am not using the import.

databaseservice.js

import { db } from './config';
import { collection, doc } from 'firebase/firestore';

export const getChapters = (scanId) => {
    db.collection('somecollection')
        .doc(scanId)
        .get()
        .then((doc) => {
            if (doc.exists) {
                console.log('Document data:', doc.data());
            } else {
                // doc.data() will be undefined in this case
                console.log('No such document!');
            }
        })
        .catch((error) => {
            console.log('Error getting document:', error);
        });
};

Error:TypeError: config__WEBPACK_IMPORTED_MODULE_0_.db.collection is not a function

I have tried with compat and lite versions. Getting the same issue.