I am developing a shift scheduler and I use firebase authentication and firestore. My idea is that when a user signs up it creates a document in collection "workers" and sets the doc id to the user's email. When the user adds a shift I want to add the shift info into a sub-collection "shifts" inside that user's document where all the shifts will be stored. I have read and seen many guides but I can't get the syntax/logic right, and due to firebase changes of syntax I am including most of the settings I use.

firebase.js:

import { getAuth } from "firebase/auth";
import "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore"
require('firebase/auth');

const firebaseConfig = {
  ...
};
const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const auth = getAuth(app);
export default app

SignUp.js:

import { db } from "../firebase";
import { collection, addDoc, setDoc, doc } from "firebase/firestore";
import { useAuth } from '../contexts/AuthContext';
const { signup } = useAuth();  
 
    const handleSubmit = async (event) => {
    event.preventDefault();
    setError("");
      try{
        const data = new FormData(event.currentTarget);
        await signup ( data.get('email'), data.get('password'));
        const docRef = await setDoc(doc(db, "workers", data.get('email')), {
            firstName: data.get('firstName'),
            lastName: data.get('lastName'),
            email: data.get('email'),
            numberOfShifts: 0
        });
      }
      catch(e){
          console.error("Error adding document: ", e);
          setError("Failed to create an account");
      };

The sign up works nicely and the document id is the email. The error is when I try to add shift to that document (the collection shifts is not created at this stage)

Datasheed.js: (where the user inputs their shifts)

import { auth } from "../firebase"
import { db } from "../firebase";

const commitChanges = async ({ added, changed, deleted }) => {
      if (added) {
        try {
          db.collection("workers")
          .doc(auth.currentUser.email)
          .collection("shifts")
          .add(added);
        } catch (e) {
          console.error("Error adding document: ", e);
        }
      }

For now I am only trying to add, and the caught exception I am getting is: Error adding document: TypeError: firebase__WEBPACK_IMPORTED_MODULE_5_.db.collection is not a function. From what I have read the problem is that I use firebase modular and it doesn't have db.collection anymore and it uses collection refs. Do I need the collection ref for the sub-collection as well? What changes do I need to do in order to implement this?