Error with multiple DataGrid on a page

The DataGrid work fine if there’s only 1 on a page. A second DataGrid causes the following error. I’ve tried both grids independently, and extracted to a common component. Tried both beta 2 and 3.

error-boundary-callbacks.ts:90 Error: A table must have at least one Column with the isRowHeader prop set to true
    at $76d00c5a4edb230a$var$TableCollection.updateColumns (Table.tsx:174:13)
    at $76d00c5a4edb230a$var$TableCollection.commit (Table.tsx:117:10)
    at $96ead35620b8fd36$export$b34a105447964f9f.updateCollection (Document.ts:521:27)
    at $96ead35620b8fd36$export$b34a105447964f9f.getCollection (Document.ts:487:10)
    at CollectionBuilder.tsx:102:31
    at updateSyncExternalStore (react-dom-client.development.js:8499:31)
    at Object.useSyncExternalStore (react-dom-client.development.js:28671:16)
    at exports.useSyncExternalStore (react.development.js:1316:34)
    at $42ceafc619f9c3ba$var$useCollectionDocument (CollectionBuilder.tsx:115:20)
    at $42ceafc619f9c3ba$export$bf788dd355e3a401 (CollectionBuilder.tsx:53:32)
    at Object.react_stack_bottom_frame (react-dom-client.development.js:28038:20)
    at renderWithHooks (react-dom-client.development.js:7984:22)
    at updateFunctionComponent (react-dom-client.development.js:10501:19)
    at beginWork (react-dom-client.development.js:12136:18)
    at runWithFiberInDEV (react-dom-client.development.js:986:30)
    at performUnitOfWork (react-dom-client.development.js:18997:22)
    at workLoopSync (react-dom-client.development.js:18825:41)
    at renderRootSync (react-dom-client.development.js:18806:11)
    at performWorkOnRoot (react-dom-client.development.js:17914:35)
    at performSyncWorkOnRoot (react-dom-client.development.js:20399:7)
    at flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:20241:21)
    at flushSpawnedWork (react-dom-client.development.js:19752:9)
    at commitRoot (react-dom-client.development.js:19335:60)
    at commitRootWhenReady (react-dom-client.development.js:18178:7)
    at performWorkOnRoot (react-dom-client.development.js:18054:15)
    at performWorkOnRootViaSchedulerTask (react-dom-client.development.js:20384:7)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:45:48)

The above error occurred in the <Unknown> component. It was handled by the <ErrorBoundaryHandler> error boundary.

'use client';
import { DataGrid, EmptyState } from '@heroui-pro/react';
import { SortableLibraryItem } from './sorting';

interface ItemTableProps {
  title?: string;
  items: (SortableLibraryItem & { _id: string })[];
  tableKey: string;
}
export function ItemTable({ title, items, tableKey }: ItemTableProps) {
  return (
    <DataGrid
      // key={tableKey}
      aria-label="Library items"
      columns={[
        {
          id: 'title',
          headerClassName: 'content-end align-end',
          header: () => (
            <div className="flex flex-col">
              <span className="text-sm font-bold">{title}</span>
              <span className="text-muted text-xs">Title / Key</span>
            </div>
          ),
          minWidth: 200,
          // accessorKey: 'title',
          cell: (item) => (
            <div className="flex flex-col ">
              <span className="text-sm font-medium">{item.title}</span>
              <span className="text-muted text-xs">{item.key}</span>
            </div>
          ),
        },
        {
          id: 'type',
          headerClassName: 'content-end align-end',
          header: 'Type',
          accessorKey: 'subType',
          // minWidth: 120,
          maxWidth: 200,
        },
        {
          id: 'storyDate',
          header: 'Story Date',
          headerClassName: 'content-end align-end',
          // minWidth: 120,
          maxWidth: 200,
          cell: (item) => (
            <div className="flex flex-col">
              <span className="text-sm font-medium">
                {item.position?.startDate}
              </span>
            </div>
          ),
        },
        {
          id: 'publicationDate',
          headerClassName: 'content-end align-end',
          header: 'Publication Date',
          accessorKey: 'publishedDate',
          // minWidth: 120,
          maxWidth: 200,
        },
      ]}
      contentClassName="w-full"
      data={items}
      getRowId={(item) => item.id}
      renderEmptyState={() => (
        <EmptyState size="sm">
          <EmptyState.Header>
            <EmptyState.Title>Nothing to see here.</EmptyState.Title>
          </EmptyState.Header>
        </EmptyState>
      )}
      selectionMode="none"
      variant="primary"
    />
  );
}

npm ls | grep heroui
├── @heroui-pro/react@1.0.0-beta.3
├── @heroui/react@3.0.3
├── @heroui/styles@3.0.3