How to use orderBy subcollection in firestore - reactjs

Question

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>
);
}

Answer 1

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.