Getting two components to sit horizontally in react while using event object

I am using the event object to try and create three images next to each other. I am running into an issue where because they are returned in order, they keep stacking vertically when I want them to be in two rows, with three items per row.

Here is my current code for App.js:

function App() {
  let imgGen = [{img:""},{img:""},{img:""},{img:""},{img:""},{img:""}];
  let images = imgGen.map((image1) => {
    return <GenSlide data={image1}/>
  });

  return (
    <div className="App">
      <Entry />
      {images}
    </div>
  );
}

Here is my code for the GenSlide class:

function GenSlide (props) {
    return (
        <div class="imagePackage">
            <img alt="this image is busted" width="300px" src={props.data.image}/>
            <button id="theButton">Save</button>
        </div>
    )
}