How can I compile a list of the most upvoted comments in a chatroom at the top of the page in a ranked format?

Question

So I just finished setting up an upvote system where every time someone clicks on a lightbulb sprite a counter is added too. This is called the 'lumen system'. I am now trying to compile all of the most upvoted comments in order from highest to lowest (this will be called the 'lumen room') that has to update in the firebase upon a comment being upvoted- and then correspondingly update inside the lumen room. My vision is to have this lumen room located at the top of the chatroom and (eventually) be collapsable as not to take up space unnecessarily. I believe the first step is to create a field in the firebase called lumens with the number type, but I am not sure what I should put for value. Any ideas?

By the way, I don't have a single drop of CSS for the LumenRoom so the below code is all I have so far. I believe this may be relevant code but let me know if something else is needed:

function LumenRoom(){
/*where most relevant/upvoted comments go*/
}

function ChatRoom() {
  const dummy = useRef();
  const messagesRef = firestore.collection('messages');
  const query = messagesRef.orderBy('createdAt').limit(5000);

  const [messages] = useCollectionData(query, { idField: 'id' });

  const [formValue, setFormValue] = useState('');