Ползунок изображения React в 2 ряда

Question

Кто-нибудь может мне помочь с слайдером изображений. Я создал слайдер, и у меня все картинки в 1 ряду, и я хочу, чтобы он был в 2 ряда, но мне это не удается. Я пытаюсь сделать это как сетку, но это не работает.

У меня это: https://ibb.co/zJCwy2n

И хочу что-то вроде этого: https://ibb.co/xHmkC4R

Ползунок. js

import React, {useState} from 'react';
import './slider.scss';
import ImageComponent from './ImageComponent';
import i1 from './assets/slider-image-1.jpg';
import i2 from './assets/slider-image-2.jpg'
import i3 from './assets/slider-image-3.jpg'
import i4 from './assets/slider-image-4.jpg'
import i5 from './assets/slider-image-5.jpg'
import i6 from './assets/slider-image-6.jpg'
import i7 from './assets/slider-image-7.jpg'
import i8 from './assets/slider-image-8.jpg'
import i9 from './assets/slider-image-9.jpg'

function Slider() {

    //Array for show component inside slider
    // let chunk_size = 9;  //Break in 2 rows
    let sliderArray = [<ImageComponent src={i1} />,
                       <ImageComponent src={i2} />, 
                       <ImageComponent src={i3} />, 
                       <ImageComponent src={i4} />, 
                       <ImageComponent src={i5} />, 
                       <ImageComponent src={i6} />, 
                       <ImageComponent src={i7} />, 
                       <ImageComponent src={i8} />, 
                       <ImageComponent src={i9} />];
    // let groups = sliderArray.map( function(e,i){ 
    //     return i%chunk_size===0 ? sliderArray.slice(i,i+chunk_size) : null; 
    // }).filter(function(e){ return e; });
    // console.log({sliderArray, groups})

    const [x, setX] = useState(0);
    const goLeft=() => {
        console.log(x);
        x === 0 ? setX(-100 * (sliderArray.length -1)) : setX(x + 100);
    };
    const goRight=() => {
        console.log(x);
        x === -100 * (sliderArray.length -1) ? setX(0) : setX(x -100);
    };

    return (
        <div className="slider">
            {sliderArray.map((item, index) => {
                    return (
                        <div key={index} className="slide" style={{transform:`translateX(${x}%)`}}>
                            {item}
                        </div>
                    );
            })}
            <button id="goLeft" onClick={goLeft}>
                <i class="fas fa-chevron-left"></i>
            </button>
            <button id="goRight" onClick={goRight}>
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    );
}

export default Slider

Компонент изображения. js

import React from 'react';

function ImageComponent ({ src }) {
        let imgStyles= {
            width: 100 + "%",
            height: "auto"
        };
    return <img src={src} alt="slide-img" style={imgStyles}></img>

}

export default ImageComponent;

И ползунок css

.slider {
    position: fixed;
    width:35%;
    height: 50vh;
    box-sizing: border-box;
    margin: 5px;
    padding: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 50px;
    background: white;
    i {
        font-size: 1vw;
    }
}

.slide {
    min-width: 25%;
    height: 50%;
    transition: 0.5s;
    overflow: hidden;
    padding-left: 5px;
    display: block;
    margin: 0 auto;
    height: auto;
    width: 100%;
    border-radius: 7%;
}

%btn-styles {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5%;
    height: 5vh;
    background: none;
    border: solid 1px #4169E1;
    outline: none;
    transition: 0.5s;
    &:hover {
        background:rgba(0, 0, 0, 0.355);
    }
    cursor: pointer;
    i {
        color: whitesmoke;
    }
}

#goLeft {
    left: 0;
    @extend %btn-styles;
    margin-top: 40px;
    margin-left: 627px;
}

#goRight {
    right: 0;
    @extend %btn-styles;
    margin-top: 95px;
}

.text  {
    font-size: 14px;
    margin-left: 675px;
    padding-top: 135px;
    color:#4169E1;
    p { margin: 0; }
}

.text2  {
    font-size: 12px;
    color:black;
    p { margin: 0; }
}