Custom edit and delete components on row DataGrid MUI v5 component hovered

Question

I'm using Material UI or MUI v5 components for the UI library in my React Js app.

I'm creating a custom edit and delete row inside the DataGrid/DataGridPro component.

The specification is to show edit and delete icons for the hovered row but not by adding a new column (not adding an action column). I found the example for a private dashboard here.

So if the user decreases the width of the browser, the edit and delete icons wouldn't be hidden instead it would hide the row as seen in the image below.

I made it here https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/demo.js but I found some drawbacks below:

1. The Popper component is rendered on top of the DataGrid component

When our mouse cursor hovered the row that was not fully shown, the Popper component was shown like these images below.

I've tried to add the disablePortal={true} prop to the Popper component but it would make the Popper component rendered outside the row like this image below.

I also have tried to change the zIndex prop for the column header (became 1000), the row (became 10), and the pagination container (became 1000) of the DataGrid component also changed the zIndex prop of the Popper component (became 100) but still the Popper component was rendered on top of the DataGrid component like this image below.

Question 1: What should I do to make the Popper component rendered on the top of the row but still inside the DataGrid component like this image below?

2. The Popper component was not sticking to the DataGrid component

If I add a few new columns, the Popper component was sticking on the end of the row like this image below. This was the condition I want.

If we scroll our mouse to the start of the row, the Popper component was not sticking to the end of the row like this image below. This was not the condition I want.

Question 2: What should I do to make the Popper component stick to the end of the row regardless of scrolling horizontally our mouse like this image below?

Here is the demo https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/Demo2.jsx

Or is there any better way to achieve this case? 🤔