ReactJs-Bootstrap崩溃立即崩溃

Question

当我单击按钮以显示内容时，Bootstrap崩溃立即崩溃。我正在使用

package.json

"bootstrap": "^4.4.1",  
"react-bootstrap": "^1.0.0",

使用折叠式jQuery

<Helmet
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"/>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"/>

</Helmet>

MyComponent.js

showMoreLess = () => {
    if (document.getElementById('morelessBtn').textContent === 'Show More') {
        document.getElementById('morelessBtn').innerHTML = 'Show Less';
    } else {
        document.getElementById('morelessBtn').innerHTML = 'Show More';
    }
};

<button className="btn btn-primary"
        id="morelessBtn"
        onClick={this.showMoreLess}
        type="button"
        aria-expanded="false"
        aria-controls="morelessContent"
        data-toggle="collapse"
        data-target="#morelessContent">
     Show More
</button>

<div id="morelessContent" className="collapse">
   <div className="row justify-content-center no-gutters">
       <div className="col-lg-4 col-md-6 portfolio-items">
            <div className="box">
                   <div className="imgBx">
                         <img className="img-fluid" src={solo2} alt=""/>
                         <p className="text-on-image">{address}</p>
                   </div>
                   <div className="content">
                        <h3>{service}</h3>
                        <p>{address}</p>
                   </div>
           </div>
      </div>

    ...

  </div>
</div>

视频= https://youtu.be/3R1QJQBuh0s