I can't work out how to use the React Bootstrap 5 Loading Management, according to these docs here: https://mdbootstrap.com/docs/b5/react/methods/loading-management/#docsTabsOverview

I'm a bit new to React and using Hooks and such, how do I use the useRef and data-mdb-parent-selector? I want it so it has a loading indicator until the whole Carousel has been loaded. Can someone please help, it would be nice if there was an example in the docs. Thanks :)

function Carousel() {
  const basicRef = useRef(null);
  return (
    <div className="data-mdb-parent-selector" ref={basicRef} style={{ height: "300px", width: "100%" }}>
      <MDBLoadingManagement parentRef={basicRef}>
        <MDBContainer style={{ padding: "15px", height: "85vh" }}>
          <MDBCarousel showIndicators showControls fade>
            <MDBCarouselInner>
              <MDBCarouselItem className="active">
                <MDBCarouselElement
                  src="/Photos/049A0527.jpg"
                  alt="Church Night Landscape"
                  // className="mw-100"
                  // max-width="100%"
                  // height="100%"
                  // object-fit="contain"
                />
                <MDBCarouselCaption>
                  <h5>First slide label</h5>
                  <p>Canon RF 24-105mm f/4L.</p>
                  <p>f4.0, Shutter Speed: 1/100, ISO: 100</p>
                </MDBCarouselCaption>
              </MDBCarouselItem>

              <MDBCarouselItem>
                <MDBCarouselElement
                  src="/Photos/049A0547.jpg"
                  alt="Dog Portrait"
                />
                <MDBCarouselCaption>
                  <h5>Second slide label</h5>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                </MDBCarouselCaption>
              </MDBCarouselItem>

              <MDBCarouselItem>
                <MDBCarouselElement
                  src="/Photos/049A0589.jpg"
                  alt="Lake Landscape"
                />
                <MDBCarouselCaption>
                  <h5>Third slide label</h5>
                  <p>
                    Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur.
                  </p>
                  s
                </MDBCarouselCaption>
              </MDBCarouselItem>
            </MDBCarouselInner>
          </MDBCarousel>
        </MDBContainer>
       </MDBLoadingManagement>
    </div>
  );
}

export default Home;