Carousel cards are not working using React bootstap

Question

I am working with carousel cards. I am using react bootstrap. It is not showing me the carousal items (image). Api is working fine.

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { getBanners } from "../container/home.actions";
import Carousel from "react-bootstrap/Carousel";
import logo from "../../../../logo.svg";

function Home() {
  const dispatch = useDispatch(); // we are getting dispatch object with the help of this, we will dispatch an action.
  const banners = useSelector((state) => state.homeReducer.banners);

  useEffect(() => {
    //component did mount
    dispatch(getBanners());
  }, []);

  const getCarouselItem = (banner) => {
    console.log("In Carousel item function..");
    return (
      <Carousel.Item>
        <img
          className="d-block w-100"
          src={`http://raw.githubusercontent.com/gautam-in/shopping-cart-assignment/master${banner.bannerImageUrl}`}
          alt="First banner"
        />
      </Carousel.Item>
    );
  };

  return (
    banners &&
    banners.length > 0 && (
      <Carousel>
        {banners.forEach((banner) => {
          getCarouselItem(banner);
        })}
      </Carousel>
    )
  );
}

export default Home;