Vuefire Firestore "useCollection" does not return document id's

Question

I have been following along with multiple tutorials and guides and all of them are using the document ID at some point when they retrieve the documents from 1 collection.

But no matter what I search for or how many times I read the documentation, I seem to be missing something because for it never returns an id.

firebase.js

import { initializeApp } from 'firebase/app'
import { getFirestore, collection } from 'firebase/firestore'

export const firebaseApp = initializeApp({
  apiKey: "------",
  authDomain: "------",
  projectId: "------",
  storageBucket: "------,
  messagingSenderId: "------",
  appId: "------"
})

// used for the firestore refs
const db = getFirestore(firebaseApp)

view.vue

    import { useFirestore } from 'vuefire'
    import { useCollection } from 'vuefire'
    import { collection } from 'firebase/firestore'
    import {ref} from "vue";

    const db = useFirestore()
    const todos = useCollection(collection(db, 'cafes'))

of course, I have copied the correct firestore data into the firebase.js file. And I am getting the info I need.

Anyone got any idea how to get the id's of the documents?