Как исправить это несколько изображений на слайдер слайд? (React)

Question

Я пытаюсь создать несколько изображений на слайдере, которые показывают три изображения на слайде, при нажатии стрелки вправо должны отображаться 3 новых изображения, а при нажатии левой кнопки мыши предыдущие 3 изображения возвращаются обратно для показа.

Я не могу заставить это работать, вот мой код:

Компонент слайдера (родительский)

class Slider extends Component {
   state = {
     left: 0
   }

    moveToRight = () =>{
        this.setState(prevState => ({
            left: prevState.left + 500
        }))

        console.log(this.state.left)
    }

    moveToLeft = () => {
        this.setState(prevState => ({
            left: prevState.left - 500
        }))
    }
    render() {

        return (
            <div className="slider container">
                <div className="slider__arrow slider__arrow--left" onClick={this.moveToLeft}>
                    <i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>
                </div>

                <Slider_content categories={this.state.categories} style={{marginLeft: `${this.state.left}px`}}/>

                <div className="slider__arrow slider__arrow--right" onClick={this.moveToRight}>
                    <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
                </div>
            </div>
        );

    }
}

export default Slider;

Компонент Slider_content:

import React, {Component} from 'react';

class Slider_content extends Component {

    render () {
        const { categories, left } = this.props;

        return (
            <div className="slider__content ">
                <div className="slider__wrapper container--vertical">

                    {categories.map((category, i) => (
                        <div className="slider__item container" key={i} style={{backgroundColor: category.categoryColor}}>
                            <div className="slider__item-details">
                                <span>{category.name}</span>
                                <a href="#" class="btn slider__btn  btn--white">View Products</a>
                            </div>
                            <div className="slider__item-img">
                                <img src={category.image} class="slider__img"/>
                            </div>

                        </div>

                    ))}  

                </div>
            </div>
        );
    }
}

export default Slider_content;

CSS:

.slider { 
  margin-top: 3em;
  height: 100%;
  position: relative;
}

.slider__content {
  height: 100%;
  width: 100%;
  position: relative;

}

.slider__wrapper {
  height: 100%;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-between
}

.slider__item {
  height: 100%;
  margin : 9px;
  position: relative;
  overflow: hidden;
}

Что я делаю неправильно в этом коде, как мне сделать так, чтобы ползунок slider_content двигался влево при нажатии стрелки вправо и вправо при нажатии стрелки влево ??

Я не хочу, чтобы слайдер скользил по 500 пикселей за клик, он просто для экспериментов мне нужно, чтобы он скользил точно, чтобы показать следующие 3 изображения в правильном положении, я тоже не мог этого сделать !!