How to get data from Google cloud storage - reactjs

Question

I use google cloud storage in my react project.
I am interested how to set another info of image to the object? for example: name, id etc.
before your advaces, I've used firebase firstore for img infos and after getting datas, creating one full object includes cloud files and firestore infos. BUT...
when I am getting files data in useEffect and want to set him info i have some undefined find item.
firstly when I render page, console parsedGallery returns array of objects.
console.log(item.name) returns item.name
console.log(obg) returns undefined !!!
when one more time refresh page everything getting ok
why happens this? what a problem?
please help me to correct this code or advice me new better way to get from cloud with clean code.
const listRef = ref(storage, `image/${currentUser?.uid}/gallery/`);
const galleryListFirestore = useSelector((state) => state.storeMain.gallery);
let parsedGallery;
if (galleryListFirestore?.length > 0) {
parsedGallery = JSON.parse(galleryListFirestore);
}
console.log(parsedGallery);
const [gallery, setGallery] = React.useState([]);
React.useEffect(() => {
listAll(listRef).then((response) => {
let galleria = [];
response?.items.forEach((item) => {
const obj = parsedGallery?.find((it) => it?.id == item?.name);
console.log(item.name);
console.log(obj);
getDownloadURL(item).then((url) => {
setGallery((prev) => [
...prev,
{
url: url,
id: obj?.id,
name: obj?.name,
uploadTime: obj?.addTime.seconds,
likes: obj?.likes,
post: obj?.post,
},
]);
});
});
setGallery(galleria);
});
}, []);