BootstrapでAccordionを使用しているのですが、一度開いたアコーディオンが閉じません。

実現したいこと

ボタン押下でアコーディオンが開閉するようにしたいのですが、一度開くとそのままになってしまいます。

発生している問題・分からないこと

ボタン押下時の動きをディベロッパーツールで確認すると、ボタン押下時にClassName＝"accordion-collapse colapse"に対してcollapsingが追加され、すぐにshowに変わります。その後、何度押下してもclappsing→show→clappsing→showとなってしまい、アコーディオンが折りたたまれません。

エラーメッセージ

error

1console上のエラーは出ていないです。

該当のソースコード

react.js

1import React from "react"; 2 3export const Accordion = ({ news }) => { 4 return ( 5 <div className={`accordion w-100`} id="accordion1"> 6 {news.map((news, index) => ( 7 <div className="accordion-item" key={index}> 8 <h2 className="accordion-header" id={`heading-${index}`}> 9 <button 10 className="accordion-button" 11 type="button" 12 data-bs-toggle="collapse" 13 data-bs-target={`#collapse-${index}`} 14 // aria-expanded="false" 15 aria-controls={`collapse-${index}`} 16 > 17 {news.title} 18 </button> 19 </h2> 20 <div 21 id={`collapse-${index}`} 22 className="accordion-collapse collapse" 23 aria-labelledby={`heading-${index}`} 24 > 25 <div className={`accordion-body text-start `}> 26 {news.contents} 27 </div> 28 </div> 29 </div> 30 ))} 31 </div> 32 ); 33}; 34

試したこと・調べたこと

上記の詳細・結果

bootstrapはindex.jsでこのようにインポートしています。
（CDNでのインポートは禁止されています。）

import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/js/bootstrap.bundle.min"; import "bootstrap/dist/js/bootstrap.esm.min";

ちなみに、別ページのBootstrapがbootstrap.esm.minのインポートを消すと動かなくなってしまいますので、消しにくいです。

補足

特になし