Moving Slide Buttons in Bootstrap Carousel not Working

Question

I'm trying to vertically center the buttons for my bootstrap carousel using react. using inline styling I was able to change the height of the button itself, but it is stuck at the top, and it seems like nothing I do will center it. I'm completely stuck and don't know what else I can do.

<div className="animation-container2">
        <div style={{display: 'flex', alignItems: 'center'}} id="carouselExampleControls" className="carousel slide" data-bs-ride="carousel">
          <div className="carousel-inner">
            <div className="carousel-item active">
              <video className="d-block w-100" controls>
                <source id="mp4_src" src='/animation-videos/BobaFett_SarlaccPit_Escape.mp4' type="video/mp4" />
                <source id="ogg_src" src='/animation-videos/BobaFett_SarlaccPit_Escape.ogg' type="video/ogg" />
                Your browser does not support the video tag.
              </video>
            </div>
            <div className="carousel-item">
              <video className="d-block w-100" controls>
                <source id="mp4_src" src='/animation-videos/SpiderGwen_Animation.mp4' type="video/mp4" />
                <source id="ogg_src" src='/animation-videos/SpiderGwen_Animation.ogg' type="video/ogg" />
                Your browser does not support the video tag.
              </video>
            </div>
          </div>
          <button style={{height: '40%'}} className="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
            <span className="carousel-control-next-icon" aria-hidden="true"></span>
            <span className="visually-hidden">Next</span>
          </button>
        </div>
        </div>
    </div>