Control arrows of MDBCarousel appearing above the carousel and not on the sides

Question

Recently started using the MDBootstrap Carousel to place my images. Works perfectly but the controls appear above the carousel instead of appearing left and right respectively. Here is the picture of the outcome

MDBCarousel

Here is the code of the Carousel

import {
  MDBCarousel,
  MDBCarouselInner,
  MDBCarouselItem,
  MDBContainer,
} from "mdbreact";

const Designs = () => {
  return (
    <>
<MDBContainer>
        <MDBCarousel activeItem={2} length={3} slide={true} multiItem>
          <MDBCarouselInner>
            <div class="position-relative">
              <MDBCarouselItem itemId="1">
                <img  src={plot1} alt="tst" />
              </MDBCarouselItem>
              <MDBCarouselItem itemId="2">
                <img  src={plot2} alt="tst" />
              </MDBCarouselItem>
              <MDBCarouselItem itemId="3">
                <img  src={plot3} alt="tst" />
              </MDBCarouselItem>
            </div>
          </MDBCarouselInner>
        </MDBCarousel>
      </MDBContainer>

</>
);
};

What could be the matter? If there is any extra code or information needed please let me know