javascript - useMemo フックが原因で、テーブルを返す React コンポーネントがエラーをスローする

Question

選択したタブに基づいてコンポーネントまたは他のコンポーネントをロードするタブコンポーネントをインポートするメインコンポーネントを持つアプリを構築しようとしています。

問題が発生するのは、そのコンポーネントでTaskOne、 useMemo フックを使用して値をメモしているためです。

次のエラーがスローされます。

Warning: React has detected a change in the order of Hooks called by Panel. This will lead to bugs and errors if not fixed. For more

詳細については、フックのルールをお読みください: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render   
------------------------------------------------------
1. useContext                 useContext
2. useState                   useState
3. useEffect                  useEffect
4. useEffect                  useEffect
5. useState                   useState
6. useLayoutEffect            useLayoutEffect
7. useRef                     useRef
8. useRef                     useRef
9. useEffect                  useEffect
10. useCallback               useCallback
11. useLayoutEffect           useLayoutEffect
12. useMemo                   useMemo
13. undefined                 useMemo    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at Panel (http://localhost:4200/vendor.js:3471:26)

コードは次のとおりです。

import { Tabs } from '../shared/ui-components';
import { TaskOne } from '../components/TaskOne';
import { TaskTwo } from '../components/TaskTwo';

export function MainComponent() {
  const testTab = [
    { name: 'TaskOne', children: TaskOne },
    { name: 'TaskTwo', children: TaskTwo }
  ];
  return (
    <div>
      <Tabs tabs={testTab} />
    </div>
  );
}

export default MainComponent;

コンポーネントの構築にはheadlessuiを使用しました。Tabs上記でインポートされたコンポーネントは次のとおりMainComponentです。

import { Tab } from '@headlessui/react';

export function Tabs({
  onChange = (index) => null,
  tabs = [],
  ...props
}) {
  return (
    <Tab.Group
      defaultIndex={0}
      onChange={(selectedIndex) => onChange(selectedIndex)}
      {...props}
    >
      <Tab.List>
        {tabs.map((item) =>
          <Tab key={item.name}>{item.name}</Tab>
        )}
      </Tab.List>
      <Tab.Panels>
        {tabs.map((item) =>
          <Tab.Panel key={item.name}>{item.children}</Tab.Panel>
        )}
      </Tab.Panels>
    </Tab.Group>
  );
}

export default Tabs;

タブにロードされたコンポーネント:

import { useMemo } from 'react';
import { Column } from 'react-table';

import { DataTable, useDataTable } from '@oam/shared/ui-components';


export const testData = [
  { id: 0, age: 20, name: 'John Doe' },
  { id: 1, age: 30, name: 'James Doe' }
];
export const columns= [
  {
    Header: 'Age',
    accessor: 'age'
  },
  {
    Header: 'Name',
    accessor: 'name'
  }
];

export const TaskOne = () => {
  const tableState = useDataTable({
    columns: useMemo(
      () => [
        {
          Header: 'Age',
          accessor: 'age'
        },
        {
          Header: 'Name',
          accessor: 'name'
        }
      ],
      []
    ),
    data: testData
  });

  return <DataTable dataTableInstance={tableState} />;
};

export default TaskOne;

これを修正する方法はありますか？