How to append the bootstrap 5 dropdown menu to a specific element. when the dropdown element is inside an element with overflow: hidden

I am use Bootstrap 5 dropdown menu inside owl-carousel. but dropdown is being cut off because has outer div overflow:hidden in owl-carousel.

Complete snippet here: jsfiddle

So, I have try to position a dropdown relatively to body, not parent with boundary option from Bootstrap Docs,

Bootstrap docs says that can only be done via javascript (not via data attributes),
so I have try below javascript methods code. but no luck.

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
    var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
      return new bootstrap.Dropdown(dropdownToggleEl, {
        boundary: document.querySelector('#main-wrapper')
      })
    })

Any suggestions with proper solution for where I'm going wrong would be greatly appreciated.

Our HTML Code:

<div id="main-wrapper">
<div class="owl-carousel owl-theme">
  <div class="item">
    <div class="d-flex align-items-center">
      <h4>Shilipp Sotocnik</h4>
      
      <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
      <a href="#" role="button" id="dropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu1">
          <li><a class="dropdown-item" href="#">Link 1</a></li>
          <li><a class="dropdown-item" href="#">Link 2</a></li>
          <li><a class="dropdown-item" href="#">Link 3</a></li>
          <li><a class="dropdown-item" href="#">Link 4</a></li>
        </ul>
      </div>
      
    </div>
  </div>
</div>
</div>

from How to append the bootstrap 5 dropdown menu to a specific element. when the dropdown element is inside an element with overflow: hidden