How to catch custom bootstrap5 event in react

Question

I'm having problem with catching custom bootstrap event in react.

component:

const Example = () => {
  let ref: HTMLLIElement | null

  useLayoutEffect(() => {
    //ref is not null here
    ref?.addEventListener('show.bs.collapse', () => {
      console.log('event')
    })
  }, [])

  return(
    <React.Fragment>
      <li
        ref={elem => ref = elem}
        className={'align-items-center rounded collapsed nav-link text-white'}
        data-bs-toggle={'collapse'}
        data-bs-target={'#ex-collapse'}
        aria-expanded={'true'}>
        Test
      </li>
      <div
        className={'collapse'}
        id={'ex-collapse'}>
        Content
      </div>
    </React.Fragment>
  )
}

export default Example

When I click li element div is properly shown and hidden but console.log is not fired.
If I change show.bs.collapse to click then console.log is fired on every click as expected.

Event list for bootstrap collapse: https://getbootstrap.com/docs/5.0/components/collapse/#events