How to implement a carousel in react from which we can select image to send to backend server?

Question

I want to implement a carousel in react where on click of the button we can send that image to the backend. I am clear with sending logic but I am not able to select image from the carousel.

This is the carousel code for reference.

<div id="carouselControls" className="carousel slide" data-interval="false">
<div className="carousel-inner">
<div className="carousel-item active">
<img className="d-block" src={BackgroundImage1} alt="First slide"/>
</div>
<div className="carousel-item">
<img className="d-block w-100" src={BackgroundImage2} alt="Second slide"/>
</div>
 <div className="carousel-item">
<img className="d-block w-100" src={BackgroundImage3} alt="Third slide"/>
</div>
<div className="carousel-item">
<img className="d-block w-100" src={BackgroundImage4} alt="Fourth slide"/>
</div>
</div>
<a
className="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev"
>
<span
className="carousel-control-prev-icon"
aria-hidden="true"
>
<i className="fas fa-arrow-left"></i>
</span>
<span className="sr-only">Previous</span>
</a>
<a
className="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next"
>
<span
className="carousel-control-next-icon"
aria-hidden="true"
>
<i className="fas fa-arrow-right"></i>
</span>
<span className="sr-only">Next</span>
</a>
</div>
<div className="text-center">
<div className="sm mt-3 mb-3">
Use Image
</div>
</div>