Untitled

update the below carousel code. currently its displaying as black. the images are not getting displayed correctly. or just update the code with bootstrap carousel.


import React from "react";
import { Carousel } from "react-responsive-carousel";
import 'react-responsive-carousel/lib/styles/carousel.min.css'


const CarouselComponent = () => {
    return (
        <Carousel>

            <div className="carousel-item active">
                <img src="images/Carousel/naruto.jpg" alt="First slide" />
                <p className="legend">naruto</p>
            </div>
            <div className="carousel-item">
                <img src="images/Carousel/fruits-basket.jpg" alt="Second slide" />
                <p>Fruits Basket</p>
            </div>
            <div className="carousel-item">
                <img src="images/Carousel/solo-levelling.jpg" alt="Third slide" />
                <p>Solo Levelling</p>
            </div>

        </Carousel>
    )
}

export default CarouselComponent;