Добавление дополнительных кнопок управления каруселью в карусель React Bootstrap 4

Question

Я работаю над портфельным проектом, и в качестве целевой страницы я использую карусель реакции bootstrap. Для тега Carousel.Caption я удалил заголовок подзаголовка и вместо этого добавил кнопки «Предыдущая / Следующая». Цель состоит в том, чтобы кнопки эмулировали стрелки стрелок Prev / Next, как показано на стандартной карусели. Я попытался использовать некоторые классы, которые были помещены на стрелки на кнопках, но это не делает работу. Любые идеи о том, как это сделать? Вот код.

class Main extends Component {
    state = {  }
    render() { 

        return ( 
<div>
    <Landing>
<Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={bowmanbg}
      alt="First slide"
    />
    <Carousel.Caption>
    <Button className="landing-button"  variant="outline-light">Previous</Button>
    <Button className="landing-button"  variant="outline-light">Next</Button>

    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={soundbg}
      alt="Third slide"
    />

    <Carousel.Caption>
    <Button href="#" className="landing-button" variant="outline-light" data-slide="prev">Previous</Button>
    <Button href="#" className="landing-button" variant="outline-light" data-slide="next">Next</Button>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={racewaybg}
      alt="Third slide"
    />

    <Carousel.Caption>
    <Button variant="outline-light" className="landing-button" data-slide="prev">Previous</Button>
    <Button variant="outline-light" className="landing-button" data-slide="next">Next</Button>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>
</Landing>
</div>

         );
    }
}

export default Main;