Multiple orderBy() in Firestore Query Produces Error

I want to query Firestore db and order by two fields. Official docs suggest I can simply combine the orderBy statements via orderBy('field1').orderBy('field2') but when I run similar code, I get the following error in console:

Project.js:62 Uncaught (in promise) TypeError: (0 , firebase_firestore__WEBPACK_IMPORTED_MODULE_0__.orderBy)(...).orderBy is not a function

My code:

const projectRef = doc(db, 'projects', projectId)
const docSnap = await getDoc(projectRef)

if(docSnap.exists()) {
    const imagesInfoRef = collection(db, 'projectGalleryImages')
    const imagesInfoDocsSnapshot = await getDocs(query(imagesInfoRef, where('project', '==', projectRef), orderBy('displayOrder').orderBy('createdOn')))
    imagesInfoDocsSnapshot.docs.map(imageInfo => {
        const imageRef = ref(storage, `project/${projectId}/images/${imageInfo.fileName}`)
        loadImageURL(imageRef)
    })
}

Why am I getting this error?

>Solution :

You’re mixing the older namespaced syntax with the newer modular syntax. In the latter, each orderBy call is a standalone instruction:

query(imagesInfoRef, 
  where('project', '==', projectRef),
  orderBy('displayOrder'), // 👈 comma here, instead of a dot
  orderBy('createdOn')
)