How to prevent my images from disappearing - reactjs

Question

I am using React + Firebase store to display images that I have stored in my firebase storage. When I click the logo or "home" navigation button which routes to the page you are already at("/"), the images disappear. The images also disappear when I click a button used to sort the menu.
This is the file that retrieves the images:
let { docs } = useFirestore("images");
// This code is used to display the images/cards as 2 per row
var chunks = function (array, size) {
var results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
};
let data = chunks(docs, 2);
return (
<>
<div class="container">
<div class="row">
<div class="col-sm col-2 mt-5">
</div>
<div class="col-12">
<div className="cards">
<h1 className="cards__header">Menu</h1>
<div className="cards__container">
<div className="cards__wrapper">
{data.map((childs, index) => {
return (
<ul className="cards__items">
{childs.map((c, cindex) => {
return (
<>
<CardItem
src={c.url}
key={c.id}
text={c.imageText}
amountLeft={c.amountLeft}
label={c.imageLabel}
price={c.price}
id={c.id}
desc={c.desc}
cat={c.cat}
></CardItem>
))}
</>
);
})}
</ul>
);
})}
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
This is the useFireStore.js file:´
import { useState, useEffect } from "react";
import { projectFirestore } from "../Firebase";
const useFirestore = (collection) => {
const [docs, setDocs] = useState([]);
useEffect(() => {
const unsub = projectFirestore
.collection(collection)
.orderBy("createdAt", "desc")
.onSnapshot((snap) => {
let documents = [];
snap.forEach((doc) => {
documents.push({ ...doc.data(), id: doc.id });
});
setDocs(documents);
});
return () => unsub();
}, [collection]);
return { docs };
};
export default useFirestore;
You can see the app at https://save-a-meal.web.app, it is in Danish though.

Answer 1

The bug is in the chunks part. On a rerender it is called again but it manipulates the docs value. To make your code work just call it like this:
const data = chunks([...docs], 2);
insted of:
const data = chunks(docs, 2);
We create a copy of the data so the function doesn't manipulate it.