AgGridReact Pagination Dropdown Overlapping with Table – CSS Z-index Not Effective

I’m using AgGridReact for a table in my project, and I’ve encountered an issue where the pagination dropdown is overlapping with the table content and isn’t properly visible. I tried to inspect the HTML elements to adjust the CSS, but I’m unable to see the dropdown options in the inspection tools, presumably because they are dynamically generated.

Here’s what the problematic UI looks like: (You could attach your image here)

I’ve attempted several CSS fixes including adjusting the z-index and modifying the position of the dropdown, but none of these changes seem to have any effect. Here are some examples of what I tried:

.ag-paging-panel {
    z-index: 1000;
}

.ag-paging-page-size-panel select {
    position: relative;
    top: -10px;
}

.ag-paging-panel {
    overflow: visible;
}

Questions:
1.How can I ensure the dropdown is not obscured or overlapping with other elements?
2.Are there any specific styles or classes in Ag-Grid that I should target to fix this issue?
3.Could this be a bug with AgGridReact or am I missing something in my CSS adjustments?
Any help or insights would be greatly appreciated!