Render SubComponent and useMemo

[SmashPlusUltra]

I'm trying to get my subcomponents not re-render all the time, just when the data is changed... so far it re-renders all the time.

const AsksBidsMemo = React.memo(AsksBids)
const Component = ({ row }: { row: Row<Instrument> }) => {
    const bids = useMemo(() => row.original.bids, [])
    const offers = useMemo(() => row.original.bids, [])
    return <AsksBidsMemo bids={bids} offers={offers} symbol={ row.original.symbol} />
    
}

And then in the table part
The Table function is based on this example https://tanstack.com/table/latest/docs/framework/react/examples/sub-components

Export default function Test(){
//loading data
      return <Table data={data} columns={columns} getRowCanExpand={() => true} renderSubComponent={Component}/>
}

And I got->
Warning: React has detected a change in the order of Hooks called by Table. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

Previous render Next render

1. useState useState
2. useState useState
3. undefined useMemo
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^