The carouselComponent is a component which is been rendered in the a different component which has its state and render method below the carouselComponent. the issue is that mapping the state.carousel is unable to render the content on the page. I have tried using the foreach method and its also not working out for me.... help me out please

  import { Carousel } from "react-bootstrap";
  
  class CarouselComponent extends React.Component {
   state = {
    carouselHeading: [
       "First slide label",
        "First slide label",
        "First slide label",
      ],
      carouselParag: [
        " Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        " Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        " Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      ],
    };
    render() {
      return (
        <>
          <Carousel.Item interval={this.props.delay}>
            <img
              className="d-block w-100"
              src={this.props.src}
              alt={`slide ${this.props.index}`}
            />
            <Carousel.Caption>
              <h3>{this.state.carouselHeading[this.props.index]}</h3>
              <p>{this.state.carouselParag[this.props.index]}</p>
            </Carousel.Caption>
          </Carousel.Item>
        </>
      );
    }
  }
  
  export default CarouselComponent;

below is the component where the carouselComponent is been rendered but the issue is.... the the code is been rendered perfectly on the devlopers tools, the carousel content is not showing at all##

state={
      src:carousel:["https://images.unsplash.com/photo-1621619856624-42fd193a0661?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1158&q=80",
        "https://images.unsplash.com/photo-1621619856624-42fd193a0661?ixlib=rb1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1158&q=80",
]
}

render(){
return(
 <Container className="carouselContent">
   <Row>
    <Col>
      <Carousel>
        {this.state.src.carousel.map((element, index) => {
         console.log("carouselComponent responded", element);
          return (
           <CarouselComponent
             delay={index === 0 ? 10000 : 500}
             src={element}
             index={index}
             key={index}
             />
                  );
                })}
              </Carousel>
)

}