Скользить делителем по горизонтали в React?

Question

Вот компонент Slider, который изменяет некоторые свойства div с некоторым интервалом, но, как вы ожидаете, изменение происходит немедленно. Так что я хочу, чтобы скользить горизонтально предыдущий div и новый div (div с текущими свойствами), чтобы скользить горизонтально влево?

Slider.js

class Slider extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            currentIndex: 0,
        }
        this.tick = this.tick.bind(this);
        this.tickBack = this.tickBack.bind(this);
    }

    componentDidMount(){
        this.timerId = setInterval(() => this.tick(), 4000);
    }

    componentWillUnmount(){
        clearInterval(this.timerId);
    }

    tick(){
        const { currentIndex } = this.state;
        const length = this.props.imgDesc.imageDescription.length;

        this.setState((prevState) => {
            return { currentIndex: (prevState.currentIndex > 0) ? 0 : ++(prevState.currentIndex) }
        });
    }

    tickBack(){
        const { currentIndex } = this.state;
        const length = this.props.imgDesc.imageDescription.length;

        this.setState((prevState) => {
            return { currentIndex: (prevState.currentIndex == 0) ? (length-1) : --(prevState.currentIndex) }
        });
    }

    render(){
        const { classes } = this.props;
        const { imageDescription } = this.props.imgDesc;
        const { currentIndex } = this.state;
        const currentImage = imageDescription[currentIndex];

        console.log(currentImage);

        var fullPath = `/images/Large/${currentImage.imagePath}.jpg`;

        return (
            <div style={{ backgroundImage: "url(" + fullPath + ")" }}  className={classes.homeDiv}>
                <Slide direction="right" in={true} timeout={1000}>
                    <div className={classes.imageDescription}>
                        <Typography variant="display3" align="right" component="h1" style={{ paddingBottom: '5px', color: 'rgb(22, 35, 22)', lineHeight: '0.9em' }}  >
                            {currentImage.head}
                        </Typography>
                        <Typography variant="subheading" align="right" style={{ paddingBottom: '10px' }} color="inherit" gutterBottom  >
                            {currentImage.subhead}
                        </Typography>
                        <Slide direction="left" in={true} timeout={700}>
                            <div className={classes.imageDescButton}>
                                <Button variant="outlined" >{currentImage.button.text}</Button>
                            </div>
                        </Slide>
                    </div>
                </Slide>

            </div>
        )
    }
}