Restoring Pinned Columns Breaks Header

[lounsbrough]

Steps to reproduce

Steps:

1. Open this link to live example: https://bolt.new/~/sb1-f1tht7hp
2. Load the sandbox page and observe that when pinned columns are restored via a restoreState call on the api, the data moves but the header does not.

Video of sandbox behavior:

demo.mov

Current behavior

Column headers are not updated to the correct position and get detached from the data in the rows 😱.

Expected behavior

I would expect the headers to stay in the correct position relative to the data below them.

Context

No response

Your environment

npx @mui/envinfo

System:
    OS: macOS 15.7.1
  Binaries:
    Node: 22.12.0 - /Users/david/.nvm/versions/node/v22.12.0/bin/node
    npm: 11.2.0 - /Users/david/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 10.13.1 - /Users/david/Library/pnpm/pnpm
  Browsers:
    Chrome: 141.0.7390.55 <-- I'm using Chrome
    Edge: 141.0.3537.57
    Firefox: 137.0
    Safari: 26.0.1
  npmPackages:
    @emotion/react: ~11.14.0 => 11.14.0 
    @emotion/styled: ~11.14.1 => 11.14.1 
    @mui/icons-material: ~7.3.2 => 7.3.2 
    @mui/material: ~7.3.2 => 7.3.2 
    @mui/system: ^7.3.2 => 7.3.2 
    @mui/x-data-grid-pro: ~8.12.1 => 8.12.1 
    @mui/x-license: ^8.12.0 => 8.12.0 
    react: ~19.1.1 => 19.1.1 
    react-dom: ~19.1.1 => 19.1.1 

Search keywords: pinned columns order