React .map creating another container for images

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

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>
);