I'm using reactstrap collapse for an accordion of FAQs. However, I only want one open at a time. I've tried changing states of collapse, but nothing is working. I can open all of the items. I also tried replacing it with the uncontrolled collapse so I don't have to manage state. Any thoughts? 

Here's my code: 

```
import React from 'react';
import PropTypes from 'prop-types';
import { Col, Collapse } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg- 
icons';

class ListGroupCollapse extends React.Component {
static propTypes = {
    item: PropTypes.object,
};
state = {
    collapse: false,
    active: false,
};

toggle = () =>
    this.setState({
        collapse: !this.state.collapse,
        active: !this.state.active,
    });

render() {
    const item = this.props.item;
    return (
        <Col key={item.title}>
            <div
                className={this.state.active ? 'title active' : 'title'}
                onClick={this.toggle}
            >
                {item.title}
                <FontAwesomeIcon
                    icon={
                        this.state.active ? faChevronUp : faChevronDown
                    }
                />
            </div>
            <Collapse isOpen={this.state.collapse}>
                <div className="content">
                    <span
                        dangerouslySetInnerHTML={{
                            __html: this.props.item.content,
                        }}
                    />
                </div>
            </Collapse>
        </Col>
    );
}
}

export default ListGroupCollapse;

```