Ag Grid react dropdown not showing outside grid

Using typeahead as cell editor for search, and in rows, and adding.

The problem is, when applying the typeahead for options, will show only inside the table.

I tried overflow: visible and it works that way

actions-button-cell:has(.MultiColumn) {
  overflow: visible;
}

.ag-cel:has(.MultiColumn)l {
  overflow: visible;
}

.ag-row:has(.MultiColumn) {
  z-index: 0;
}

.ag-row.ag-row-focus:has(.MultiColumn) {
  z-index: 1;
}


.ag-root:has(.MultiColumn),
.ag-root-wrapper:has(.MultiColumn),
.ag-body-viewport:has(.MultiColumn),
.ag-body-viewport-wrapper:has(.MultiColumn),
.ag-center-cols-clipper:has(.MultiColumn),
.ag-center-cols-viewport:has(.MultiColumn) {
  overflow: visible !important;
} 

In css this will show the options without hiding but the scroll from the aggrid row is gone cuz of overflow:visible.

Is there a way to show the dropdown options outside of aggrid without removing the scroll

Any help will be appreciated

sandbox link: https://codesandbox.io/s/v1cqbz

for aggrid columndef in the field you want to add cellEditorPopup: true it will make the full typeahead and dropdown option come on top .

columnDefs= [{field:"name",cellEditorPopup: true,cellEditor:"editorname"}]