Firestore get data crash with thousands of requests

I'm not sure what causes this issue, it's working fine almost all the time.

But with large document (1000+ document in sub-collections in this document)

Firestore DB Structure

projects
  - overviews (col) <--- this have ~10 documents
    details <--- this contains array of object length ~100 for each doc
  - order (col) <--- this have ~1000 documents
    details
  stats

Firebase SDK fire thousands of request to https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel

And it crashes the browser. (the number of requests seems to match with a number of the document in sub-collections)

Here is my code

firestore.js

export const getProject = (projectsCollection, option, projectId) => {
    return projectsCollection
        .doc(projectId)
        .get(option)
        .then((doc) => { return doc.data() })
}

App.js

function App(props) {
    const { projectsCollection } = props.firebase
    const [project, setProject] = useState([])
    useEffect(() => { 
      firestore.getProject(db.collection('projects'), {}, props.match.params.projectId)
      .then((doc) => { setProject(doc) })
    }, [])
} 
export default withFirebase(App);

Firebase.js

import FirebaseApp from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import { createContext } from 'react'
class Firebase {
  constructor() {
    if (!FirebaseApp.apps.length) {
      const firebaseConfig = { /* ... */ }
      FirebaseApp.initializeApp(firebaseConfig)
      FirebaseApp.firestore()
        .enablePersistence({ synchronizeTabs: true })
        .catch(err => console.log(err))
    }

    this.db = FirebaseApp.firestore()
    this.projectsCollection = this.db.collection('projects')
    this.auth = FirebaseApp.auth()
  }
}

const FirebaseContext = createContext(null)

export { Firebase, FirebaseContext, FirebaseApp }

withFirebase.js

import React from 'react'
import { FirebaseContext } from '.'

export const withFirebase = Component => props => {
  return (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
)}

Not sure the issues cause by Firestore or just my project setup or it is normal behavior of Firebase SDK.

I think the response size is fine to render but the network requests that crash the browser.