Overwrite parent's `overflow-hidden` to display drop down content

Question

I have two drop-down and modal components with highly customized styles. When the drop-down is inside the modal, the overflow of the drop-down is hidden due to the style of modal (hidden overflow). And the style of the modal cannot be changed because it needs to be scrollable for larger content.

This is my abstract structure and style:

<div class="ReactModalPortal">
  <div style="position: fixed; inset: 0px;z-index: 3;">
    <div style="position: absolute; overflow-y: hidden" tabindex="-1" role="dialog">
      <div style="overflow-y: hidden">
        <div style="overflow-y: auto">
          <div>
            <form>
              <div>
                <div style="position: relative;" >
                    {/* Drop down list */}
                  <ul style="position: absolute; z-index: 9; overflow: hidden; overflow-y: auto;"></ul>
                </div>
              </div>
              
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

When all the parent overflow and overflow-y are back to default, the problem is solved but the modal is not scrollable anymore.

What can be done with minimum changes in order to display the ul out of modal scope?