[React Compiler] useReactTable state updates not reflected in UI

[ashimrai123]

What I did

• Created a React 19.2 Vite app with babel-plugin-react-compiler enabled.
• Used @tanstack/react-table v8 to render a table with rows from state.
• Added a button that calls setData(...) to change the row data.
• Observed that although React state does update, the table UI does not rerender to reflect the new data.

What I expected

• After clicking the button, the table rows / cells should re-render to display the updated state.
• The internal useReactTable logic should pick up the new data array and recompute the row model.

What actually happened

• The data state updates (verified via console.log).
• The table UI stays the same (no visible change).
• When I remove babel-plugin-react-compiler, everything works normally — state updates reflect in the table.

Minimal reproducible example

// DashboardPage.tsx
import { useState } from 'react';
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  type ColumnDef,
} from '@tanstack/react-table';

type Person = { name: string; age: string };
const initialData: Person[] = [{ name: 'ash', age: '25' }];

export default function DashboardPage() {
  const [data, setData] = useState<Person[]>(initialData);

  const columns: ColumnDef<Person>[] = [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'age', header: 'Age' },
  ];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div>
      <button
        onClick={() => setData((s) => s.map((p) => ({ ...p, name: 'a' })))}
      >
        Change data
      </button>
      <table>
        <thead>
          {table.getHeaderGroups().map((hg) => (
            <tr key={hg.id}>
              {hg.headers.map((h) => (
                <th key={h.id} colSpan={h.colSpan}>
                  {flexRender(h.column.columnDef.header, h.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}