Unable to use bulma-carousel

[adnue]

I'm using Bulma-Carousel with React. I have imported the CSS in index.js file. This is my Component on which I'm trying to use it ->

import React from "react";
const bulmaCarousel = require("bulma-carousel/dist/js/bulma-carousel");

export class About extends React.Component {
    componentDidMount() {
        bulmaCarousel.attach();
    }

    render() {
        return(
            <div>
                <div class='carousel carousel-animated carousel-animate-slide'>
                    <div className='carousel-container'>
                        <div className='carousel-item has-background is-active'>
                            <img className="is-background" src="" alt="" width="640" height="310" />
                            <div className="title">Merry Christmas</div>
                        </div>
                        <div className='carousel-item has-background'>
                            <img className="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
                            <div className="title">Original Gift: Offer a song with <a href="https://lasongbox.com">La Song Box</a></div>
                        </div>
                        <div className='carousel-item has-background'>
                            <img className="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
                            <div className="title">Sushi time</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

Here's an image of what I see ->