Firestore orderBy function in react-CodePudding

I have a page which shows some collections from my firestore database, I am struggling to work out how to use the orderBy function to show the documents in a specific order.

I'm not sure where to put orderBy in the code. I would like to order them by a field from the firestore documents called 'section'.

I've been trying this week following other tutorials and answers from StackOverflow but can't yet work it out.

import React, { useEffect, useState, Component, setState }  from 'react';
import { collection, getDocs, getDoc, doc, orderBy, query } from 'firebase/firestore';
import "./AllSections.css";
import { Firestoredb } from "../../../../../firebase.js";
import AllCourses from './AllCourses';
import ReactPlayer from 'react-player'

import ViewSection from './ViewSection';
import SectionsTabData from './SectionsTabData';
import {
  BrowserRouter as Router,
  Link,
  Route,
  Routes,
  useParams,
} from "react-router-dom";
import VideoJS from './VideoJS';



function SectionsData() {


  const videoJsOptions = {
    controls: true,
    sources: [{
      src: sectionVideo,
      type: 'video/mp4'
    }]
  }

  const {courseId} = useParams();

  const {collectionId} = useParams();

  const params = useParams();

  const [sectionId, setSectionId] = useState('');

  const [sectionImage, setSectionImage] = useState('');

  const [sectionVideo, setSectionVideo] = useState('');
  
  const [sectionContent, setSectionContent] = useState('');


    const [isShown, setIsShown] = useState(false);
    const handleClick = event => {
        //