How to create multi-items slider in React? - reactjs

Question

I created a multi-items carousel and it's fetching all images from the database but only displaying 3 images. I need this carousel to display all images from the database when one click on side arrows. How can I make it work as "https://react-multi-carousel.now.sh/" this carousel? Can you help me with my custom carousel?
.home__wrapper {
.categoryslider__wrapper {
display: flex;
width: 100%;
margin-top: 15px;
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.05s, height 0.05s linear;
height: auto;
.category {
position: relative;
height: 14vh;
margin-bottom: 1em;
cursor: pointer;
& >img {
height: 100%;
width: 100%;
object-fit: cover;
}
p {
position: absolute;
top: 0.2em;
left: 1em;
color: rgb(255, 255, 255);
font-size: 2vh;
font-weight: 900;
letter-spacing: 0.5px;
line-height: 24px;
width: 80%;
text-align: left;
}
}
}
}
import React from 'react'
import {withRouter} from 'react-router'
import './index.scss'
import {times} from 'lodash'
import Carousel from 'react-bootstrap/Carousel'
import {Col} from 'react-bootstrap';
import {API} from '../../../constants';
class CategorySlider extends React.Component {
render() {
let {stores} = this.props;
return (
<>
<Carousel className='categoryslider__wrapper'>
{times(4, (index) => {
return (
<Carousel.Item key={index}>
{stores && stores.length && stores.map(store => {
if (store.featured_products.length){
return store.featured_products[0].image_url;
}
return stores[0].name;
}).filter(image=>image!==undefined).map((image_link, i )=> {
return (
<Col key={image_link + "" + i} className="col-4 category" >
<img src={API.files.detail.replace('/files/:fileUUID/', image_link)} alt=""></img>
<p>{stores[i].name}</p>
</Col>
)
})}
</Carousel.Item >
)
})}
</Carousel>
</>
);
}
}
export default withRouter(CategorySlider);