nextui: [BUG] - When using Table, "type.getCollectionNode is not a function" error

Describe the bug

When using the Table components, I get an error in the console from inside NextUI’s code :

I tried using the Table component two different ways :

• First, by using the render function as indicated by the documentation :

<Table.Header columns={counterTableColumns}>
  {
    (pColumn: CounterTableColumn) => {
      return (
        <Table.Column
          key={pColumn.uid}
          hideHeader={pColumn.hideHeader}
          align={pColumn.align ?? 'start'}
        >
          {pColumn.name}
        </Table.Column>
      );
    }
  }
</Table.Header>

• Then by using the Array.map method :

<Table.Header>
  {
    counterTableColumns.map(
      (pColumn: CounterTableColumn) => {
        return (
          <Table.Column
            key={pColumn.uid}
            hideHeader={pColumn.hideHeader}
            align={pColumn.align ?? 'start'}
          >
            {pColumn.name}
          </Table.Column>
        );
      },
    )
  }
</Table.Header>

In both cases, no ESLint or TypeScript errors are displayed in my IDE nor in my terminal.

These test were also made with the Table.Body section of the table.

I am using :

• Windows 10
• "@nextui-org/react": "^1.0.0-beta.10"
• "react": "^18.2.0"
• "react-scripts": "5.0.1"
• "typescript": "4.4.2"

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

CountersList.tsx :

/* Type declarations ----------------------------------- */
interface CounterTableColumn {
  name: string;
  uid: string;
  hideHeader?: boolean;
  align?: 'center' | 'start' | 'end';
}

/* Internal variables & constants ---------------------- */
const counterTableColumns: CounterTableColumn[] = [
  { name: 'Nom', uid: 'name' },
  { name: 'Description', uid: 'role' },
  { name: 'Actions', uid: 'actions', hideHeader: true },
];

const userCounters: CounterLightFragment[] = [
  {
    __typename: 'Counter',
    id: '1',
    name: 'Test1',
    description: 'Une description',
    avatarHash: null,
    avatarContentType: null,
  },
];

/* CountersList component prop types ------------------- */
interface CountersListProps {}

/* CountersList component ------------------------------ */
const CountersList: React.FC<CountersListProps> = () => {
  const userID = useReactiveVar(userIDReactiveVar);

  // const {
  //   data: userData,
  //   loading: loadingUserData,
  //   error: errorUserData,
  // } = useGetUserQuery(
  //   {
  //     variables: {
  //       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  //       id: userID!,
  //     },
  //     skip: userID === null,
  //   },
  // );

  // const userCounters: CounterLightFragment[] = userData?.getUser?.counters?.map(
  //   (pVal: UserCounterOwnershipFragment) => {
  //     return pVal.counter;
  //   },
  // ) ?? [];

  console.log(`[DEBUG] <CountersList> userCounters :`, userCounters);

  return (
    <Table bordered>
      <Table.Header>
        {
          counterTableColumns.map(
            (pColumn: CounterTableColumn) => {
              return (
                <Table.Column
                  key={pColumn.uid}
                  hideHeader={pColumn.hideHeader}
                  align={pColumn.align ?? 'start'}
                >
                  {pColumn.name}
                </Table.Column>
              );
            },
          )
        }
      </Table.Header>
      {/* <Table.Header columns={counterTableColumns}>
        {
          (pColumn: CounterTableColumn) => {
            return (
              <Table.Column
                key={pColumn.uid}
                hideHeader={pColumn.hideHeader}
                align={pColumn.align ?? 'start'}
              >
                {pColumn.name}
              </Table.Column>
            );
          }
        }
      </Table.Header> */}
      <Table.Body>
        {
          userCounters.map(
            (pCounter: CounterLightFragment) => {
              return (
                <CountersListItem
                  key={`${pCounter.id}-${pCounter.name}`}
                  counter={pCounter}
                />
              );
            },
          )
        }
      </Table.Body>
      {/* <Table.Body items={userCounters}>
        {
          (pCounter: CounterLightFragment) => {
            return (
              <CountersListItem
                key={`${pCounter.id}-${pCounter.name}`}
                counter={pCounter}
              />
            );
          }
        }
      </Table.Body> */}
      <Table.Pagination
        shadow
        noMargin
        align="center"
        rowsPerPage={10}
        onPageChange={(page) => console.log({ page })}
      />
    </Table>
  );
};

/* Export CountersList component ----------------------- */
export default CountersList;

CountersListItem.tsx :

/* CountersListItem component prop types --------------- */
interface CountersListItemProps {
  counter: CounterLightFragment;
}

/* CountersListItem component -------------------------- */
const CountersListItem: React.FC<CountersListItemProps> = ({ counter }) => {
  return (
    <Table.Row key={counter.id}>
      <Table.Cell>
        <User
          src={counter.avatarHash ?? undefined}
          name={counter.name}
        >
          {counter.description}
        </User>
      </Table.Cell>
      <Table.Cell>
        {JSON.stringify(counter)}
      </Table.Cell>
      <Table.Cell>
        Actions
      </Table.Cell>
    </Table.Row>
  );
};

/* Export CountersListItem component ------------------- */
export default CountersListItem;

Expected behavior

Render the table correctly

Screenshots or Videos

Operating System Version

Windows 10

Browser

Chrome