[v8] I want to toggle asc and desc without null when sorting [using react]

[mi-upto]

I would like to customize the sort function and implement a table that repeats asc and desc order.
without null when sorting.

I would like to customize

'desc' -> 'asc' -> 'desc' -> 'asc'

my code

'desc' -> 'asc' -> null -> 'desc' -> 'asc' -> null

// Hoge.tsx

<TableSortable
  width='100%'
  minW='600px'
  bodyData={bodyData}
  columnData={columnData}
  defaultSort={{
    id: 'like',
    desc: true,
  }}
/>

const bodyData = [
  {
    name: 'dog',
    like: 2,
    dislike: 0,
  },
  {
    name: 'cat',
    like: 3,
    dislike: 0,
  },
];

const columnData = [
  {
    accessorFn: (row) => row.name,
    cell: (info) => info.getValue(),
    header: () => 'animals',
    footer: (props) => props.column.id,
    id: 'animals',
  },
  {
    accessorFn: (row) => row.like,
    cell: (info) => info.getValue(),
    header: () => 'likeCount',
    footer: (props) => props.column.id,
    id: 'likeCount',
  },
  {
    accessorFn: (row) => row.dislike,
    cell: (info) => info.getValue(),
    header: () => 'dislikeCount',
    footer: (props) => props.column.id,
    id: 'dislikeCount',
  },
];

// TableSortable.tsx

import { Table, TableProps, Thead, Tbody, Tr, Th, Td, chakra } from '@chakra-ui/react';
import {
  ColumnDef,
  ColumnSort,
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  SortingState,
  useReactTable,
} from '@tanstack/react-table';
import { useState, useMemo } from 'react';

type TableSortableProps<Data extends Object> = {
  bodyData: Data[];
  columnData: ColumnDef<Data>[];
  defaultSort: ColumnSort;
} & TableProps;

export const TableSortable = <Data extends Object>({
  bodyData,
  columnData,
  defaultSort,
}: TableSortableProps<Data>) => {
  const [sorting, setSorting] = useState<SortingState>([defaultSort]);
  const columns = useMemo<ColumnDef<Data>[]>(() => columnData, [columnData]);

  const table = useReactTable({
    data: bodyData,
    columns,
    state: {
      sorting,
    },
    sortDescFirst: true,
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  return (
    <Table borderRadius='2xl' bg='white' overflow='hidden'>
      <Thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <Tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => {
              const arrow = {
                desc: '↓',
                asc: '↑',
                default: null,
              }[header.column.getIsSorted() || 'default'];

              return (
                <Th
                  key={header.id}
                  colSpan={header.colSpan}
                  fontSize='xs'
                  fontWeight='normal'
                  color='color.text.sub'
                  borderColor='color.border.main'
                  minW='160px'
                  p={0}
                >
                  <chakra.button
                    onClick={header.column.getToggleSortingHandler()}
                    fontSize='xs'
                  >
                    {flexRender(header.column.columnDef.header, header.getContext())}
                    <chakra.span>{arrow}</chakra.span>
                  </chakra.button>
                </Th>
              );
            })}
          </Tr>
        ))}
      </Thead>
      <Tbody fontSize='sm'>
        {table.getRowModel().rows.map((row) => {
          return (
            <Tr key={row.id}>
              {row.getVisibleCells().map((cell) => {
                return (
                  <Td key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </Td>
                );
              })}
            </Tr>
          );
        })}
      </Tbody>
    </Table>
  );
};

refs:
https://tanstack.com/table/v8/docs/api/features/sorting#sorting-functions
https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/sorting?from-embed=&file=/src/main.tsx:3195-3372

[mi-upto]

Sorry, I solved myself.
I used toggleSorting func instead of getToggleSortingHandler.
thx 🌞

  const isDesc = header.column.getIsSorted() === 'desc';
  header.column.toggleSorting(!isDesc);