ReactJS - How to filter images out into different layouts in carousel

I have data in data.json, what I want to do is to read data and filter images into a carousel following this mockup: image

data.json is structured as followed:

 {
  "data": [
    {
      "_id": "1",
      "metaData": {
        "designStyle": [5, 15],
        "qualityStandard": [4],
        "homeArea": [27]
      },
      "height": 800,
      "width": 1200,
      "size": 292465,
      "imageKey": "images/00004_E_cimage.jpg"
    },
    {
      "_id": "2",
      "metaData": {
        "designStyle": [3, 9],
        "qualityStandard": [4],
        "homeArea": [27]
      },
      "height": 800,
      "width": 1200,
      "size": 185853,
      "imageKey": "images/00009_E_cimage.jpg"
    },
    {
      "_id": "3",
      "metaData": {
        "designStyle": [10, 12],
        "qualityStandard": [5, 4],
        "homeArea": [8]
      },
      "height": 800,
      "width": 1067,
      "size": 119722,
      "imageKey": "images/00014_E_cimage.jpg"
    },

    ...

  ]
}

I've built UI for the mockup, now I'm intending to filter images so they take turn to sit alternatively in the layout that I've built, and after that I can make it slide like a carousel. But I don't know how to do the correct function to filter images.

Here's my current code:

import React from "react";
import "./Carousel.css";
import data from "../../data.json";

const Carousel = () => {
  const homeData = data.data;

  return (
    <div>
      <div className="carousel-container">
        {homeData.map((slide, index) => {
          return (
            <div className="carousel-slide">
              {/* <Left_Card /> */}
              <div className="left-card_container" id="left">
                <div className="left-card_row_1">
                  <img src={slide.imageKey} alt="default image" />
                </div>
                <div className="left-card_row_2">
                  <div className="left-card_col_1">
                    <img src={slide.imageKey} alt="default image" />
                  </div>
                  <div className="left-card_col_2">
                    <img src={slide.imageKey} alt="default image" />
                  </div>
                </div>
              </div>
              {/* <Right_Card /> */}
              <div className="right-card_container" id="right">
                <div className="right-card_row_1">
                  <div className="right-card_col_1">
                    <img src={slide.imageKey} alt="default image" />
                  </div>
                  <div className="right-card_col_2">
                    <img src={slide.imageKey} alt="default image" />
                  </div>
                </div>
                <div className="right-card_row_2">
                  <img src={slide.imageKey} alt="default image" />
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <button id="prevBtn">Prev</button>
      <button id="nextBtn">Next</button>
    </div>
  );
};

export default Carousel;

Here's the current result: image. Thanks in advance.