Выпадающее меню Bootstrap в ReactJS, только одно открытое за раз

У меня есть страница, содержащая несколько карт Bootstrap, и каждая карта является компонентом, и каждый нижний колонтитул карты также является компонентом. Нижний колонтитул содержит кнопки. Когда вы нажимаете на кнопку, выпадающее меню будет открыто, как показано ниже.

В любой момент времени, когда я нажимаю кнопку, другие выпадающие списки должны находиться в закрытом состоянии. Но это происходит так...

Требование: еще одна вещь - когда я нажимаю на ту же кнопку, соответствующий снимок должен быть закрыт.

Требование: когда я нажимаю на какой-либо элемент внутри, выпадающий снизу должен быть закрыт

Моя архитектура подобна ниже

ГЛАВНАЯ СТРАНИЦА КОМПОНЕНТНОГО КОДА -START

class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      activatedIdStoredInParent: ""
    };
  }
  toggleCountersMenu = (name) => {
    var name1 = name;
    this.setState((prevState) => {
      return {
        activatedIdStoredInParent: name1
      }
    });
  } 

  render() {
   
    const products = this.state.items.map((item, index) => {     
      return <div>
        <Card
          product={item}
          activatedIdStoredInParent={this.state.activatedIdStoredInParent}
          toggleCountersMenu={this.toggleCountersMenu}
        >
        </Card>;
      </div>
    });

    return (
      <div>
        <div className="card-columns">
          {products}
        </div>
      </div >
    );
  }
}

export default HomePage;