I'm creating a custom actions column on the DataGridPro component with the column pinning feature. The cell inside the actions column will only be rendered if the row is being hovered like this image below.

Here is the playground https://codesandbox.io/s/github-mui-custom-data-grid-fxqytz.

If we hover the row inside the DataGridPro component one by one slowly (like the first 5 seconds in the video below), the actions column is not lagging (it's rendered precisely where the row is being hovered). But if we hover the row inside the DataGridPro component one by one fast, (like the rest of the video below), the actions column is lagging (visually, the speed of rendering each actions column is lagging than the speed of the mouse movement).

https://user-images.githubusercontent.com/24468466/155148773-7e3a376d-4b23-4270-90f0-5414bdfa0dc2.mp4

What I want is the actions column is not lag with the mouse movement like this video below.

https://user-images.githubusercontent.com/24468466/155150540-571b16a3-4768-4ee6-af11-f17e1dea9d30.mp4

What's the problem that makes the actions column on my DataGridPro component lags and what's the solution for this?