Question: why MDBMask renders behind MDBCarousel in MDBView while it's working fine with img element?

Expected behavior: show same mask on each carousel item.

Actual behavior: show mask behind items.

Resources:

import React from "react";
import {MDBMask, MDBRow, MDBCol, MDBIcon, MDBBtn, MDBView, MDBContainer, MDBCard, MDBCardBody, MDBInput, MDBAnimation, MDBCarousel, MDBCarouselInner, MDBCarouselItem} from "mdbreact";
import "../../../templates/HomePage/Home.css";

class Home extends React.Component {

  render() {

const homeMask = (
    <MDBMask className="d-flex justify-content-center align-items-center gradient">
      <MDBContainer>
        <MDBRow>
          <MDBAnimation
            type="fadeInLeft"
            delay=".3s"
            className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5"
          >
            <h1 className="h1-responsive font-weight-bold">
              Sign up right now!
            </h1>
            <hr className="hr-light" />
            <h6 className="mb-4">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Rem repellendus quasi fuga nesciunt dolorum nulla magnam
              veniam sapiente, fugiat! Commodi sequi non animi ea dolor
              molestiae, quisquam iste, maiores. Nulla.
            </h6>
            <MDBBtn outline color="white">
              Learn More
            </MDBBtn>
          </MDBAnimation>

          <MDBCol md="6" xl="5" className="mb-4">
            <MDBAnimation type="fadeInRight" delay=".3s">
              <MDBCard id="classic-card">
                <MDBCardBody className="white-text">
                  <h3 className="text-center">
                    <MDBIcon icon="user" /> Register:
                  </h3>
                  <hr className="hr-light" />
                  <MDBInput
                    className="white-text"
                    iconClass="white-text"
                    label="Your name"
                    icon="user"
                  />
                  <MDBInput
                    className="white-text"
                    iconClass="white-text"
                    label="Your email"
                    icon="envelope"
                  />
                  <MDBInput
                    className="white-text"
                    iconClass="white-text"
                    label="Your password"
                    icon="lock"
                    type="password"
                  />
                  <div className="text-center mt-4 black-text">
                    <MDBBtn color="indigo">Sign Up</MDBBtn>
                    <hr className="hr-light" />
                    <div className="text-center d-flex justify-content-center white-label">
                      <a href="#!" className="p-2 m-2">
                        <MDBIcon
                          fab
                          icon="twitter"
                          className="white-text"
                        />
                      </a>
                      <a href="#!" className="p-2 m-2">
                        <MDBIcon
                          fab
                          icon="linkedin"
                          className="white-text"
                        />
                      </a>
                      <a href="#!" className="p-2 m-2">
                        <MDBIcon
                          fab
                          icon="instagram"
                          className="white-text"
                        />
                      </a>
                    </div>
                  </div>
                </MDBCardBody>
              </MDBCard>
            </MDBAnimation>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    </MDBMask>
)

return (
    <MDBView>
      <MDBCarousel
      activeItem={1}
      length={3}
      showControls={true}
      showIndicators={true}
      className="z-depth-1"
      >
        <MDBCarouselInner>
          <MDBCarouselItem itemId="1">
            <MDBView>
              <img
                className="d-block w-100"
                src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg"
                alt="First slide"
              />
            </MDBView>
          </MDBCarouselItem>
          <MDBCarouselItem itemId="2">
            <MDBView>
              <img
                className="d-block w-100"
                src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg"
                alt="Second slide"
              />
            </MDBView>
          </MDBCarouselItem>
          <MDBCarouselItem itemId="3">
            <MDBView>
              <img
                className="d-block w-100"
                src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"
                alt="Third slide"
              />
            </MDBView>
          </MDBCarouselItem>
        </MDBCarouselInner>
      </MDBCarousel>
      {homeMask}
    </MDBView>
);
}
}

export default Home;

please note that I cannot use this mask for each carousel item separately cause it's a login form.