Getting Data using query Params and Firebase with React - reactjs

Question

I am trying to return a single Booklet from firestore whose ID matches the id from the URL. I am using useParams() to extract the id from the url. When I console.log singleBooklet, it is an empty Array. I am pretty sure the problem is that the component is rendering before the query in the useEffect has time to setSingleBooklet. Any solutions?
const Booklet = () => {
const [singleBooklet, setSingleBooklet] = useState([]);
const params = useParams();
useEffect(() => {
if (params.id) {
const q = query(
collection(db, "Booklet"),
where("bookletId", "==", params.id)
);
const unsubscribe = onSnapshot(q, (querySnapshot) => {
setSingleBooklet(
querySnapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
);
});
console.log(singleBooklet);
return unsubscribe;
}
}, []);
return (
<div className="booklet-section row">
<div className="col-md-8 col-sm-10 col-lg-7 col-xl-5 mx-auto">
<Carousel interval={null}>
<Carousel.Item>
<h4 className="text-center">Cover</h4>
<div className="cover">
<img src={ELFlogo} className="cover-logo"></img>
<h1 className="text-secondary">{singleBooklet[0].title}</h1>
<br></br>
<h5>By</h5>
<h3 className="text-secondary"></h3>
</div>
</Carousel.Item>
</Carousel>
</div>
</div>
);
};