title: DataGridPro MUI - Custom column pinning with a hovered row is lag with the mouse movement
body: <p>I'm creating a custom actions column on the <code>DataGridPro</code> 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.</p>
  <p><img src="https://user-images.githubusercontent.com/24468466/155146931-da7019cf-51ae-46e4-a9fd-5d9b4da53425.png" alt="image" /></p>
  <p>Here is the playground <a href="https://codesandbox.io/s/github-mui-custom-data-grid-fxqytz" rel="nofollow noreferrer">https://codesandbox.io/s/github-mui-custom-data-grid-fxqytz</a>.</p>
  <p>If we hover the row inside the <code>DataGridPro</code> 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 <code>DataGridPro</code> 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).</p>
  <p><a href="https://user-images.githubusercontent.com/24468466/155148773-7e3a376d-4b23-4270-90f0-5414bdfa0dc2.mp4" rel="nofollow noreferrer">https://user-images.githubusercontent.com/24468466/155148773-7e3a376d-4b23-4270-90f0-5414bdfa0dc2.mp4</a></p>
  <p>What I want is the actions column is not lag with the mouse movement like this video below.</p>
  <p><a href="https://user-images.githubusercontent.com/24468466/155150540-571b16a3-4768-4ee6-af11-f17e1dea9d30.mp4" rel="nofollow noreferrer">https://user-images.githubusercontent.com/24468466/155150540-571b16a3-4768-4ee6-af11-f17e1dea9d30.mp4</a></p>
  <p>What's the problem that makes the actions column on my <code>DataGridPro</code> component lags and what's the solution for this?</p>