This is the complete component code snippet:

import {
  ColumnDef,
  flexRender,
  SortingState,
  useReactTable,
  getCoreRowModel,
} from "@tanstack/react-table";
import { useIntersectionObserver } from "@/hooks";
import {
  Box,
  Flex,
  Text,
  Paper,
  Table,
  Skeleton,
  BoxProps,
  useMantineTheme,
} from "@mantine/core";
import {
  forwardRef,
  ReactNode,
  useEffect,
  useState,
  useMemo,
  useRef,
  memo,
} from "react";
import { QueryFunction, useInfiniteQuery } from "@tanstack/react-query";
import { RiDatabase2Line } from "react-icons/ri";
import { css } from "@emotion/css";

export type FetchFn<T> = (props: { pageParam: number }) => Promise<T[]>;

interface TableComponentProps<T> {
  queryFn: QueryFunction<T[], string[], number>;
  columns: ColumnDef<T, any>[];
  queryKey: any[];
}

const TableComponent: <T>(props: TableComponentProps<T>) => ReactNode = memo(
  ({ queryKey, queryFn, columns }) => {
    const skullComponentRef = useRef<HTMLDivElement>(null);
    const [sortingState, setSortingState] = useState<SortingState>([]);
    const entry = useIntersectionObserver(skullComponentRef, {});
    const isVisible = !!entry?.isIntersecting;
    const { colors } = useMantineTheme();

    const {
      data,
      isLoading,
      fetchStatus,
      hasNextPage,
      isRefetching,
      fetchNextPage,
    } = useInfiniteQuery({
      queryFn,
      initialPageParam: 0,
      refetchOnWindowFocus: false,
      staleTime: 1 * 60 * 1000, // 1 min
      queryKey: [...queryKey, sortingState],
      getNextPageParam: (lastPage, allpages) =>
        lastPage.length ? allpages.length : null,
    });

    const scrollPingPong = () => {
      const tableContainer = document.querySelector<HTMLDivElement>(
        ".mantine-ScrollArea-viewport"
      );
      if (tableContainer && skullComponentRef.current) {
        tableContainer.scrollTop =
          tableContainer.scrollHeight -
          tableContainer.clientHeight -
          skullComponentRef.current.offsetHeight;
        tableContainer.scrollTop =
          tableContainer.scrollHeight - tableContainer.clientHeight;
      }
    };

    const flatData = useMemo(
      () => data?.pages?.flatMap((row) => row) ?? [],
      [data]
    );

    const table = useReactTable({
      columns,
      data: flatData,
      state: { sorting: sortingState },
      onSortingChange: setSortingState,
      getCoreRowModel: getCoreRowModel(),
    });

    useEffect(() => {
      if (isVisible && hasNextPage) {
        scrollPingPong();
        fetchNextPage();
      }
    }, [isVisible, hasNextPage, fetchNextPage]);

    return (
      <Paper
        mt="md"
        bg="white"
        withBorder
        radius={"lg"}
        style={{ overflow: "hidden" }}
      >
        <Table.ScrollContainer
          minWidth={800}
          h={`calc(100vh - 80px - 4rem)`}
          className={css({
            ".mantine-ScrollArea-viewport": { paddingBottom: 0 },
          })}
        >
          <Table
            className={css({
              "tbody tr:nth-child(even)": {
                background: colors.tailwind_gray[0],
              },
            })}
            verticalSpacing="md"
            horizontalSpacing="xl"
            withRowBorders={false}
          >
            <Table.Thead
              h="4rem"
              c="white"
              bg={colors.tailwind_indigo[6]}
              style={{ position: "sticky", top: 0, zIndex: 1 }}
            >
              {table.getHeaderGroups().map((headerGroup) => (
                <Table.Tr key={headerGroup.id}>
                  {headerGroup.headers.map((header) => (
                    <Table.Th
                      style={{ cursor: "pointer" }}
                      key={header.id}
                      onClick={() => {
                        header.column.toggleSorting();
                      }}
                    >
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                      {{
                        asc: " 🔼",
                        desc: " 🔽",
                      }[header.column.getIsSorted() as string] ?? null}
                    </Table.Th>
                  ))}
                </Table.Tr>
              ))}
            </Table.Thead>
            <Table.Tbody
              style={{
                maxHeight: "calc(100vh - 134px)",
                overflowY: "auto",
              }}
              className={css({
                "& tr:hover": {
                  transition: "background .1s ease",
                  background: `${colors.tailwind_gray[1]} !important`,
                },
              })}
            >
              {table.getRowModel().rows.map((row) => (
                <Table.Tr style={{ cursor: "pointer" }} key={row.id}>
                  {row.getVisibleCells().map((cell) => (
                    <Table.Td
                      key={cell.id}
                      onClick={() => {
                        cell.column.id !== "action" && row.toggleSelected();
                      }}
                    >
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </Table.Td>
                  ))}
                </Table.Tr>
              ))}
            </Table.Tbody>
          </Table>

          {(hasNextPage || isRefetching || isLoading) && (
            <Skull
              skullAmount={isLoading ? 10 : 3}
              ref={skullComponentRef}
              px="xs"
            />
          )}
          {fetchStatus === "idle" && !hasNextPage && (
            <Flex
              py="lg"
              gap="xs"
              h="100%"
              align="center"
              tt="capitalize"
              justify="center"
              c="tailwind_submarine.9"
              bg="tailwind_submarine.0"
            >
              <RiDatabase2Line size={25} />
              <Text>no further records found.</Text>
            </Flex>
          )}
        </Table.ScrollContainer>
      </Paper>
    );
  }
);

const Skull = forwardRef<HTMLDivElement, BoxProps & { skullAmount: number }>(
  ({ skullAmount, ...props }, ref) => {
    return (
      <Box ref={ref} {...props}>
        {Array(skullAmount)
          .fill(null)
          .flatMap((_, key) => {
            return <Skeleton h="3.5rem" mt="xs" key={key} />;
          })}
      </Box>
    );
  }
);

export default TableComponent;

Here it's being utilized:

import {
  Menu,
  Modal,
  Flex,
  Title,
  Stack,
  Button,
  Checkbox,
  ActionIcon,
  useMantineTheme,
} from "@mantine/core";
import { useQueryClient, useMutation } from "@tanstack/react-query";
import { IRetailer } from "@/providers/onboardingformprovider";
import { RiDeleteBin6Line, RiEdit2Line } from "react-icons/ri";
import { createColumnHelper } from "@tanstack/react-table";
import { BsThreeDotsVertical } from "react-icons/bs";
import TableComponent, { FetchFn } from "./table";
import { useDisclosure } from "@mantine/hooks";
import { useState } from "react";

interface Product
  extends Pick<
    IRetailer,
    | "productname"
    | "priceperunit"
    | "productquantity"
    | "productcategory"
    | "productdescription"
  > {
  check?: any;
  action?: any;
}

const columnHelper = createColumnHelper<Product>();

const ProductsList = () => {
  const [selectedProduct, setSelectedProduct] = useState<Product>();
  const [opened, { open, close }] = useDisclosure(false);
  const [products, setProducts] = useState<Product[]>([
    ...
  ]);
  const { colors } = useMantineTheme();
  const client = useQueryClient();

  ...

  return (
    <>
      <TableComponent
        columns={columns}
        queryKey={["products"]}
        queryFn={fetchProducts}
      />
      <Modal
        ...
      >
        ...
      </Modal>
    </>
  );
};

export default ProductsList;

The sorting icons visually change their appearance based on the sorting state, but the columns are not visually sorted in ascending or descending order. The issue is related to using the "useInfiniteQuery" hook.

I have tried other examples online and the code appears to be valid.