折叠Reactstrap，在单击时折叠所有div元素

Question

我正在使用折叠reactstrap，问题是当我单击单个div元素时，所有元素都在折叠。.如何折叠单个div？

我设法获得了孩子到父母的索引，以便将其用于toggleCollapse。

const DEFAULT_GROUP_CATEGORIES = ["Brand", "Size", "Color"];
export default class ProductDetailPageComponent extends PureComponent {
constructor(props) {
super(props);

this.state = {
  isCollapse: false,
  isSubBrandOpen: false,
  isSubSizeOpen: false,
  isSubColorOpen: false,
groupCategories: DEFAULT_GROUP_CATEGORIES,

this.toggleCollapse = this.toggleCollapse.bind(this);

toggleCollapse(event, index) {
console.log("COLLAPSE", event.target.id);
console.log("INDEXXX", index);
this.setState({ isCollapse: !this.state.isCollapse});
}

render() {
let callbacks = {
  toggleCollapse: this.toggleCollapse
};

return <ProductDetailComponent {...this.state} callbacks={callbacks} />;
 }
}

export default class CategoriesHomeComponent extends PureComponent {
displayGroupCategories() {
return (
  <Fragment>
    {this.props.groupCategories.map(
      (lists, keys) => (
        console.log("LISTS", lists),
        (
          <ListGroupItem
            key={keys}
            className={`${
              // lists.includes("Size") || lists.includes("Color")
                // ? "no-bg"
                 "no-bg removable"
            }`}
          >
            <div
              id={keys}
              className="toggle-trigger"
              onClick={e => this.props.callbacks.toggleCollapse(e, keys)}
              // data-tag={"toggler-" + keys}
            >
              <span className="mdi mdi-chevron-down" />{" "}
              <strong>{lists[keys].brand}</strong>
              <button
                onClick={this.props.callbacks.toggleModal}
                className={`${
                  // lists.match("Size") || lists.match("Color")
                    // ? "btn btn-remove hide"
                     "btn btn-remove"
                }`}
                title="Remove this entire grouped category"
              >
                <i className="fas fa-times" />
              </button>
            </div>
            <Collapse
              key={keys}
              isOpen={this.props.isCollapse}
              // toggler={"#toggler-" + keys}
            >
              <SubGroupListItems
                subgroupBrand={this.props.subgroupBrand}
                classList="list-group-item no-bg removable"
              />
            </Collapse>
          </ListGroupItem>
}
}

SubGroupListItems在折叠时显示子类别的内容。

如何才能使用索引，在productDetailPageComponent中设置其状态，而对于要单击的特定div元素，将其父状态设置为？