React .map creating another container for images - reactjs

Question

I have a map with display flex with some images and a firebase storage where I can upload a pic, and the pic gets shown in that flex gallery, but there should not be more than 6 in that gallery, and when more than 6 pictures are uploaded, another container should be made where the new pics get placed, the images are held in a state,the code is here
//This is the container styles
.container {
display: flex;
justify-content: center;
align-items: center;
margin: 10vmin;
overflow: hidden;
transform: skew(5deg);
// This is the map
<div className=" grid grid-rows-3 bg-black">
<div className={styles.container}>
{imageList.map((url) => {
return (
<div className={styles.card}>
<img src={url} />
</div>
);
})}
</div>
// This is the
I need to make that map somehow know that once a container gets to 6 pictures, it should make another one in the row below,
Thank you for helping

Answer 1

You could try using the Array.prototype.slice() method to separate the image list into two arrays and then render them with two separate maps.
const imageListLength = imageList.length;
let imageListTop, imageListBottom;
// Split image list into two arrays
if (imageListLength > 6) {
imageListTop = imageList.slice(0, 6);
imageListBottom = imageList.slice(6);
} else {
imageListTop = imageList;
imageListBottom = [];
}
return (
<div className="grid grid-rows-3 bg-black">
<div className={styles.container}>
{imageListTop.map((url) => {
return (
<div className={styles.card}>
<img src={url} />
</div>
);
})}
</div>
{imageListBottom.length > 0 && (
<div className={styles.container}>
{imageListBottom.map((url) => {
return (
<div className={styles.card}>
<img src={url} />
</div>
);
})}
</div>
)}
</div>
);
EDIT Taking your answer:
You could expand on your code by adding a loop to the code that renders the images. This loop would check the length of the image list and render the images in groups of 6 until the list is exhausted.
const imageListLength = imageList.length;
let imageListTop, imageListBottom;
if (imageListLength > 6) {
imageListTop = imageList.slice(0, 6);
imageListBottom = imageList.slice(6);
} else {
imageListTop = imageList;
imageListBottom = [];
}
return (
<div className="grid grid-rows-3 bg-black">
{/* Loop through the image list */}
{imageList.map((url, index) => {
if (index % 6 === 0) {
return (
<div className={styles.container}>
{imageList.slice(index, index + 6).map((url) => {
return (
<div className={styles.card}>
<img src={url} />
</div>
);
})}
</div>
);
}
})}
</div>
);