getToggleSortingHandler get stuck not working after render

[maxime4000]

Describe the bug

Using mostly the kitchen sink example with Styled-components and trpc/react-query to do useInfiniteQuery. So when the table is being rerender, the column sorting function will work, but when the table stop being rerender, those function stop working...

Your minimal, reproducible example

Will try to create a reproductible environment if necessary

Steps to reproduce

Tbh, other than maybe replicating the same setup as the

const Page = () => {
    const [sorting, setSorting] = useState<SortingState>([]);
    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
    const [columnResizeMode, setColumnResizeMode] = React.useState<ColumnResizeMode>("onChange");
    const infiniteQuery = trpc.something.list.useInfiniteQuery(
        { limit: 25, sorting },
        {
            getNextPageParam: (lastPage) => lastPage.nextCursor,
            keepPreviousData: true,
            refetchOnWindowFocus: false,
        }
    );
    const { data, isFetching, fetchNextPage, isFetched, isLoading, hasNextPage, isFetchingNextPage } = infiniteQuery;
    const table = useReactTable<Session>({
        columns,
        columnResizeMode,
        data: flatData,
        getCoreRowModel: getCoreRowModel(),
        initialState: {},
        enableSorting: true,
        state: { sorting, columnVisibility },
        onSortingChange: setSorting,
        onColumnVisibilityChange: setColumnVisibility,
        // debugTable: true,
        debugHeaders: true,
    });
        return (
        <Table<Something>
            height={500}
            table={table}
            fetchNextPage={fetchNextPage}
            hasNextPage={hasNextPage}
            isFetchingNextPage={isFetchingNextPage}
            count={totalItem}
        />
    );
};

const Table = () => {

const rowVirtualizer = useVirtual({...});
const fetchMoreOnBottomReached = ...

return (
<TableContainer ref, onScroll>
  <Table>
    <Thead>
     <Tr>
       <Th>
         <HeaderCell>
                   {header.column.getCanSort() && (
          <SortButton
            onClick={(e: any) => {
              console.log("Sorting", header.column);
              const ss = header.column.getToggleSortingHandler();
              console.log("ss", ss);
              //header.column.toggleSorting();
              ss(e);
            }}>
            {{
              asc: <ArrowUpIcon />,
              desc: <ArrowDownIcon />,
            }[header.column.getIsSorted() as string] ?? <FilterIcon />}
          </SortButton>
        )}
</TableContainer>
)  
}

Expected behavior

OnClick={header.column.getToggleSortingHandler()} should be working even after rerender.

How often does this bug happen?

Every time

Screenshots or Videos

https://github.com/TanStack/table/assets/4070713/4d5fe021-57bf-4176-8c4b-a7ac11e45db1

Platform

Macos Chrome

react-table version

8.9.1

TypeScript version

5.0.4

Additional context

"@tanstack/react-query": "4.29.12", "@tanstack/react-query-devtools": "4.29.12", "react-virtual": "2.10.4",

"@trpc/client": "10.29.0", "@trpc/next": "10.29.0", "@trpc/react-query": "10.29.0", "@trpc/server": "10.29.0",

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[maxime4000]

So I think my package/build/whatever cache was corrupt or something like that because it's now working perfectly and I have not made a single change to this, but I had problem with my whole local environment for the last 2 days...

[maxime4000]

Nevermind talk too soon...