React и Bootstrap 4 Свернуть

Я импортирую:

import Collapse from "react-bootstrap/es/Collapse";

Итак, я пытаюсь заставить мой коллапс работать в моем проекте, вот из рендера:

<div className="card-header" >
    <a className="card-link" href='#compSci' onClick={this.toggleCollapse}>
        Computer Sciences
    </a>
</div>
<Collapse id="collapse1" isOpen = {this.state.collapse1}>
    <div className="card-body">
        <div className="row">
            {
                computerScience.map(skill => (
                    <div className="col">
                        <SkillPopover skill={skill} />
                    </div>
                ))
            }
        </div>
    </div>
</Collapse>

С функцией сворачивания переключателя, которая меняет значения с истинного на ложное.

toggleCollapse = () => {
        this.setState({ collapse1: !this.state.collapse1 });
        console.log(this.state.collapse1)
}

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

ИЗМЕНИТЬ Я следую приведенному здесь руководству: https://reactstrap.github.io/components/collapse/