Ok, I figured it out...

To create a custom ID for a new doc is as follows...

setDoc(doc(db, 'collection', 'ID'), { feild: value, feild: value });

or in my case as an example...

setDoc(doc(db, 'users', (cred.user.uid), { bio: signupForm['signup-bio'].value });

This creates a new doc (and the users collection if it doesn't exist already) with the ID being the current logged in users UserID and the data in the doc is the value from a signup form called 'signup-bio'

In order to set custom document IDs in Firestore, you need to use the set method instead of add:

db.collection("users").doc("YOUR_ID").set({
    bio: signupForm['signup-bio'].value
});

You can refer to the official documentation on how to Set a document which states that:

To create or overwrite a single document, use the set() method:

// Add a new document in collection "cities"
db.collection("cities").doc("LA").set({
    name: "Los Angeles",
    state: "CA",
    country: "USA"
})
.then(() => {
    console.log("Document successfully written!");
})
.catch((error) => {
    console.error("Error writing document: ", error);
});

If the document does not exist, it will be created. If the document does exist, its contents will be overwritten with the newly provided data, unless you specify that the data should be merged into the existing document...

For someone who using collection as variable / existing function.

Example in Typescript like this https://javascript.plainenglish.io/using-firestore-with-typescript-in-the-v9-sdk-cf36851bb099

Normal:

const docRef = doc(helloCol())

But you can also do something like…:

const docRef = doc(helloCol(), 'some-id')
// await setDoc(docRef, { /* data */ })

Without changing helloCol() 🎉

Ref: https://firebase.google.com/docs/reference/js/firestore_.md#doc