与锚标记一起使用时的 Bootstrap5 模态错误

问：

我创建了一个带有垃圾图标的锚标签，该标签会触发删除模式。哪个必须按钮是或否，哪个会进一步击中它们各自的 api。 下面是一个 react 组件的一部分：

<a
   data-testid="deleteEventModalBtn"
   className={styles.icon}
   data-bs-toggle="modal"
   data-bs-target={`#deleteEventModal${props.id}`}
   >
   <i className="fa fa-trash"></i>
 </a>

 <div
   className="modal fade"
   id={`deleteEventModal${props.id}`}
   tabIndex={-1}
   role="dialog"
   aria-labelledby={`deleteEventModalLabel${props.id}`}
   aria-hidden="true"
  >
  <div className="modal-dialog" role="document">
     <div className="modal-content">
        <div className="modal-header">
           <h5
             className="modal-title"
             id={`deleteEventModalLabel${props.id}`}
            >
             {t('deleteEvent')}
             </h5>
             <Button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </Button>
        </div>
       <div className="modal-body">{t('deleteEventMsg')}</div>
     <div className="modal-footer">
              <Button
                type="button"
                className="btn btn-danger"
                data-dismiss="modal"
              >
                {t('no')}
              </Button>
              <Button
                type="button"
                className="btn btn-success"
                onClick={deleteEvent}
                data-testid="deleteEventBtn"
              >
                {t('yes')}
              </Button>
          </div>
        </div>
    </div>
</div>

但是当我单击垃圾桶图标时，我遇到了一些关于引导的错误。

ERROR
ne.getInstance(...) is null
./node_modules/bootstrap/dist/js/bootstrap.min.js/</<@http://localhost:3000/static/js/bundle.js:147739:13
i@http://localhost:3000/static/js/bundle.js:146670:53

谁能帮我？

我本来希望得到删除模式，但是当我单击垃圾桶图标时，它给了我上述错误。