Separate queries into a different file - reactjs

Question

At the moment I have a react app that has multiple pages making different queries from Firebase and more specifically Firestore. These queries are at the top of the file with the code for the component in the return statement.
How do I separate the queries into a separate file so that the query can be called across multiple components without repeating the code for the query? I have a provided a sample page from my website, I would like to separate the query to get the createdBy property and put it into a function called getTicketCreatedBy for example that I can call.
I'm new to React so I'm just trying to understand how best to structure files in React.
Thanks
import React, { useState, useEffect, Fragment } from "react";
import { db } from "../../firebase";
import { updateDoc, doc, getDoc, onSnapshot } from "firebase/firestore";
import {
ArrowPathIcon,
CalendarIcon,
ExclamationCircleIcon,
Bars3Icon,
} from "#heroicons/react/24/outline";
import SelectFieldStandard from "../inputs/SelectFieldStandard";
export default function Details({ currentTicketData, currentTicketRef }) {
const updateTicketState = async () => {
await updateDoc(getUser, {
state: 5,
});
};
//Get CreatedBy property from the Users collection
const [createdByData, setCreatedByData] = useState("");
const createdByDocRef = doc(db, "Users", currentTicketData.createdBy);
useEffect(() => {
onSnapshot(createdByDocRef, (doc) => {
const newData = doc.data();
setCreatedByData(newData);
});
}, []);
return (
<div className="mt-5 md:col-span-1 md:mt-0">
<div className="shadow overflow-hidden rounded-md">
<div className="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6">
<h1 className="mt-2 text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:text-3xl sm:truncate">
Details
</h1>
<div className="pt-2">
<p className="text-sm font-medium text-gray-900 dark:text-white pt-2">
Created By
</p>
<p className="mt-2 flex items-center text-sm text-slate-700 dark:text-slate-400">
<Bars3Icon
className="flex-shrink-0 mr-1.5 h-5 w-5"
aria-hidden="true"
/>
{createdByData.firstName} {createdByData.lastName}
</p>
</div>
</div>
</div>
</div>
);
}
I can't seem to find any information online for how to separate Firebase queries.