How to use orderBy subcollection in firestore

I want to sort data by timestamp in firestore subcollection using orderBy. I looked example and tried to follow but it didn't work. How to use orderBy timestamp in firestore with React. This is a my reference to fetch a data in subcollection ref

this is a my result on web
result

App.js

import "./App.css";
import { collection } from "@firebase/firestore";
import { useCollectionData } from "react-firebase-hooks/firestore";
import { db } from "./firebase";
import ChildrenList from "./ChildrenList";


export default function App() {
  const query = collection(db, "profile");
  const [docs, loading, error] = useCollectionData(query);

  return (
    <div>
      <h1>test</h1>

      {loading && "Loading..."} 

        <ul>
          <tbody>
            {docs?.map((doc) => (    
          <div key={Math.random()}>
            <ChildrenList  path={`profile/${doc.uid}/time`} />
          </div>
        ))}
        </tbody>
      </ul>
    </div>
    
  );
}

ChildrenList.js

import { collection } from "@firebase/firestore";
import { useCollectionData } from "react-firebase-hooks/firestore";
import { db } from "./firebase";
import Table from 'react-bootstrap/Table';

export default function ChildrenList({ path }) {
  const query = collection(db, path);
  const [docs, loading, error] = useCollectionData(query);

  return (
    <ul>
      {loading && "Loading..."}
      <Table striped bordered hover variant="dark" size="md">
        <tbody> 
           {docs?.map((doc) => {
            const timestamp = { nanoseconds: doc.timeStamp.nanoseconds, seconds: doc.timeStamp.seconds }
            const firebasetime = new Date(
              timestamp.seconds * 1000 + timestamp.nanoseconds / 1000000,
            );
            const date = firebasetime.toDateString();
            const timeStamp = firebasetime.toLocaleTimeString();
            console.log(date, timeStamp);
            return(
            <tr>
              <td>{doc.name}</td>
              <td>{doc.sid}</td>
              <td>{doc.group}</td>
              <td>{doc.room}</td>              
              <th>{date}</th>
              <th>{timeStamp}</th>
            
              </tr>
            
           )})}</tbody>
           </Table>
      
    </ul>
  );
}

import { getFirestore, collectionGroup, getDocs,
         query, orderBy, limit } from '@firebase/firestore';

export default function App() {
  // const query = collection(db, "profile"); // This is not query it's reference
  const q = query(collectionGroup(getFirestore(), 'subCollectionName'),
                  orderBy('createdAt', 'desc'), limit(15))
  // I dont know how reactFirebaseHooks returns so make remplate on your own.
  const [docs, loading, error] = useCollectionData(q);
  // Firebase would use `onSnapshoot()` or `getDocs()` function to
  // get data using query i made above.

  return (
    <div>
      <h1>test</h1>
      {loading && "Loading..."} 
        <ul>
          {docs?.map((doc) => (    
            ...
          ))}
        </ul>
    </div>
  );
}

<tbody> tag is for <table> not <ul>. I don't know what react firebase hooks returns, but I know that getDocs from Firebase returns array of documents snapshots that under .data() has document data.