Collection Reference is invalid in Firestore - reactjs

Question

The NextJS app was working fine a few days ago and now giving the following error. Nothing has changed in backend and table still exists.
Unhandled Runtime Error
FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
My firebase config file
import { initializeApp, getApp, getApps } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
const firebaseConfig = {
apiKey: XXX,
authDomain: XXX,
projectId: XXX,
storageBucket: XXX,
messagingSenderId: XXX,
appId: XXX,
measurementId: XXX,
};
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);
export { app, auth, db, storage };
And the useEffect inside the function component
import React, { useEffect, useState } from "react";
import {
onSnapshot,
collection,
addDoc,
getDocs,
orderBy,
query,
where,
limit,
QuerySnapshot,
} from "firebase/firestore";
import { db } from "../../config/firebase";
const [users, setUsers] = useState([]);
useEffect(() => {
const q = query(
collection(db, "user_info"),
orderBy("name", "asc")
);
getDocs(q).then((querySnapshot) => {
const docs = [];
querySnapshot.forEach((doc) => {
docs.push(doc.data());
});
setUsers(docs);
});
}, []);
Also, tried using #useCollectionData from 'react-firebase-hooks', however, the same error happens.
#This works
console.log(db)
const myCollectionRef = collection(db, 'users');
const myCollectionQuery = query(myCollectionRef);
const [users, reactloading, reacterror] = useCollectionData(myCollectionQuery);
#This does not
console.log('users',users)
Seems like the app works fine as in getting data in the pages at root level, however, the firestore collection and query function breaks if used in the nested route.