Estoy creando una aplicación que rastrea la cantidad de tardanzas de los usuarios usando Firestore, pero no sé cómo ordenar la lista de resultados por la cantidad de tardanzas.

Intenté usar la función orderBy() de los documentos de Firebase, pero todavía no pude implementarla correctamente con mi código existente.

 import { useState, useEffect } from 'react'; import './App.css'; import { db } from './firebase-config'; import { collection, getDocs, addDoc, doc, } from 'firebase/firestore'; export default function App() { const [newName, setNewName] = useState(''); const [newTardy, setNewTardy] = useState(0); const [users, setUsers] = useState([]); const usersCollectionRef = collection(db, 'users'); const createUser = async () => { await addDoc(usersCollectionRef, { name: newName, tardy: Number(newTardy), }).then(() => { alert('User Created'); }); }; useEffect(() => { const getUsers = async () => { const data = await getDocs(usersCollectionRef); setUsers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))); }; getUsers(); }, []); return ( <div className="App"> <h1>Tardy List</h1> <input placeholder="Name..." onChange={(event) => { setNewName(event.target.value); }} /> <input type="number" placeholder="Number of Tardies..." onChange={(event) => { setNewTardy(event.target.value); }} /> <br /> <button onClick={createUser}> Create User</button> {users.map((user) => { return ( <div> <h2>Name: {user.name}</h2> <h2>Tardies: {user.tardy}</h2> </div> ); })} </div> ); }