carousel disappearing after showing all pictures

After further testing, I found out that the problem is related to setting the length of the carousel with props or variable.

The whole things works until I change length:11 to length: items.length or length:max, i guess the problem is related to mdbootstrap.

import React, { useState, useEffect } from "react";
import { MDBCarousel, MDBCarouselInner, MDBCarouselItem, MDBView, MDBContainer } from "mdbreact";
function Carousel() {
  const [items, setItems] = useState([]);
  const [max, setMax] = useState();

  useEffect(() => {
    async function fetchCaroussel() {
      const request = await fetch('https://emotion.dgnet.be/API/caroussel.php');
      const response = await request.json();
      setItems(response);
      setMax(items.length);
    }
    fetchCaroussel();
  }, []); 
  return (
    <MDBContainer id="containerCarousel">
      <MDBCarousel
        activeItem={1}
        length={max}
        showControls={true}
        showIndicators={false}
        className="z-depth-1"
        slide
      >            
    <MDBCarouselInner >
          {items.map((item,index) => (
            <>
              <MDBCarouselItem itemId={item.ID}>
                <MDBView>
                  <img
                    className="d-block w-100"
                    src={'https://emotion.dgnet.be' + item.URL + '.jpg'}
                    alt="slide picture"
                  />
                </MDBView>
              </MDBCarouselItem>
            </>
          ))}            
        </MDBCarouselInner>
      </MDBCarousel>
    </MDBContainer>
  );
}

export default Carousel;

I already resolve this. If you have access to our GitLab account you have to change 1 thing in the Carousel.js.

  componentDidUpdate(prevProps, prevState) {
    const { length } = this.props;
    const initialLength = length;

    if (prevState.initialLength !== length) {
      this.setState({ initialLength });
    }
  }

This will be available in the next version and also you have to add dependency in your useEffect hook:

  useEffect(() => {
    const fetchCarousel = async () => {
      const request = await fetch('https://emotion.dgnet.be/API/caroussel.php');
      const response = await request.json();
      setItems(response);
      setMax(items.length);
    };

    fetchCarousel();
  }, [items.length]);