My carousel with react-bootstrap has no active items

I am using react-bootstrap to create a carousel, but all of the carousel items are disabled.

function Project({ href, title, img, description }) {
    return (
        <Carousel.Item className="work-carousel-item">
            <img className="d-block w-100" src={img} alt={title}/>
            <Carousel.Caption>
                <h3>{title}</h3>
                <p>{description}</p>
            </Carousel.Caption>
        </Carousel.Item>
    );
}

function Work() {
    return (
        <section id="work">
            <Carousel class="mt-5">
                <Project href="#" title="Example 1" img={ImgVkMeshShaderExample} description="I'm a description"/>
                <Project href="#" title="Example 1" img={ImgVkMeshShaderExample} description="I'm a description 2"/>
            </Carousel>

            
        </section>
    )
}

I tried the official example like they did on the website, and its not working. Any ideas whats going wrong?