How to select images in carousel in Reactjs? - reactjs

Question

I have created a carousel in Reactjs in which there are some fruits images. Now how can I select or deselect multiple images? I used ImagePicker but it is allowing only one image to select. I tried very much, googled it but I couldn't find any solution. Can someone help me, please? This is the picture of the carousel.carousel
import React,{useState} from "react";
import {Link} from "react-router-dom";
import "./cropSelection.css";
import Carousel, { Dots } from '#brainhubeu/react-carousel';
import '#brainhubeu/react-carousel/lib/style.css';
import ImagePicker from 'react-image-picker';
import 'react-image-picker/dist/index.css'
import Select from 'react-select'
import img1 from './assets/x5a1c46753530787968003715118024852179.png';
import img2 from './assets/kisspngCommonGuavaTropicalFruitStrawberryGuavaGuava5abf7f16ed8bf1981749341522499350973.png';
import img3 from './assets/kisspngFrescaCitronLemonFruitTangeloGreenMangoOnGreenLeaves5a83ea37e27f718808719715185946159277.png';
import img4 from './assets/x5a1c46753530787968003715118024852179.png';
import img5 from './assets/kisspngCommonGuavaTropicalFruitStrawberryGuavaGuava5abf7f16ed8bf1981749341522499350973.png';
const imageList1 = [img1,img2,img3,img4,img5,img1]
class Crop extends React.Component {
constructor(props) {
super(props)
this.state = {
slides:[
(<ImagePicker
images={imageList1.map((image1, i) => ({src: image1, value: i}))}/>),
// (<ImagePicker
// images={imageList1.map((img, i) => ({src: img, value: i}))}
// onPick={() => this.onPick()}/> ),
]
}
}
render(){
return(
<div className="caurosel-div">
<Carousel
arrows
slidesPerScroll={1}
slidesPerPage={3}
value={this.state.value}
slides={this.state.slides}
onChange={this.onchange}
>
{/* <button type="button" onClick={() => console.log(this.state.image)}>OK</button> */}
</Carousel>
<button className="button">Proceed</button>
</div>
);
}
}
export default Crop;