I am working on building a react website and I want to add a carousel in it with some text next to it. The problem is that whenever the image switches to the next manually or automatically, the image enlarges in size and goes back to normal after the image is changed.

Here is my section containing the carousel and text in Home.jsx component:

<section className="intro-section">
        <div id="carouselAutoplaying" className="carousel slide" data-bs-ride="carousel">
          <div className="carousel-inner">
            <div className="carousel-item active">
              <img src={farm1} className="carousel-image" alt="Farm View 1" />
            </div>
            <div className="carousel-item">
              <img src={farm2} className="carousel-image" alt="Farm View 2" />
            </div>
            <div className="carousel-item">
              <img src={view3} className="carousel-image" alt="Farm View 3" />
            </div>
          </div>
          <button className="carousel-control-prev" type="button" data-bs-target="#carouselAutoplaying" data-bs-slide="prev">
            <span className="carousel-control-prev-icon" aria-hidden="true"></span>
            <span className="visually-hidden">Previous</span>
          </button>
          <button className="carousel-control-next" type="button" data-bs-target="#carouselAutoplaying" data-bs-slide="next">
            <span className="carousel-control-next-icon" aria-hidden="true"></span>
            <span className="visually-hidden">Next</span>
          </button>
        </div>
        <div className="intro-text">
          <h2>About Our Farm</h2>
          <p>
            lorem ipsum. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </p>
        </div>
      </section>

Also, here is the css for the above section in home.css:

 .intro-section {
    display: flex;
    padding: 50px 20px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  
  .intro-text {
    width: 50%;
    text-align: justify;
    flex: 1;
    padding: 20px;
    max-width: 600px;
    font-size: 1.25rem;
  }
 

.carousel {
    max-width: 100%; 
    /* margin: auto;  */
    overflow: hidden;

  }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .carousel-image {
    width: 100%; 
    height: auto; 
  }
  
  .carousel-item {
    max-height: 500px;
    overflow: hidden;
  }

I have tried the solutions from the similar questions like enclosing the image in a div or using overflow:hidden. Also, I know all my images must have the same dimensions and I have made sure of it. It has not worked for me or I am doing something wrong.

Can someone find the problem with my code and the solution.