如何集成React Bootstrap折叠平滑动画

Question

尝试编辑React Bootstrap以在单击相应的缩略图时一次打开每个选项卡。但是，单击时这些选项卡会相互重叠-如此处发布：https://naccidigital.netlify.com/audience

任何解决此问题的方向将不胜感激。

页面代码如下：

import React, { Component } from 'react';
import Well from "react-bootstrap/es/Well";
import Collapse from "react-bootstrap/es/Collapse";



class Pageanim extends Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            open: false
        };
    }

    render() {
        const items = []
        for(const key in this.props.data.data) {
          const splitted = key.split("::");
          const question = splitted[0];
          const answer = splitted[1]
          items.push({question: question, answer: answer, value: this.props.data.data[key]})
        }
        items.sort((a, b) => {
          if (a.value > b.value) {
            return -1;
          }
          else if (b.value > a.value) {
            return 1;
          }
          return 0;
        })
        console.log(items)
        return (
            <div>
                <img src={this.props.image} id="destressme" alt="destress" className="destressIma" onClick={() => this.setState({ open: !this.state.open })}/>
                <Collapse in={this.state.open}>
                    <div className="pagean">
                        <Well>
                            <h2>{this.props.data.segment}</h2>
                            {items.map((item, index) => {
                              return (<div key={index}>{item.question}</div>);
                            })}
                        </Well>
                    </div>
                </Collapse>
            </div>
        );
    }
}


export default Pageanim;