Default sorting icon

const [sorting, setSorting] = useState([]);
    
    const table = useReactTable({
        data: data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        getSortedRowModel: getSortedRowModel(),
        state: {
            sorting: sorting
        },
        onSortingChange: setSorting
    })

<thead>
                                        {table.getHeaderGroups().map(headerGroup => (
                                            <tr key={headerGroup.id}>
                                                {headerGroup.headers.map(header => (
                                                    <th key={header.id} colSpan={header.colSpan} onClick={header.column.getToggleSortingHandler()}>
                                                        {header.isPlaceholder
                                                            ? null
                                                            : flexRender(
                                                                header.column.columnDef.header,
                                                                header.getContext()
                                                        )}

                                                        {
                                                            {
                                                                asc: <i className="bi bi-caret-up-fill"></i>,
                                                                desc: <i className="bi bi-caret-down-fill"></i>
                                                            }[header.column.getIsSorted() ?? null]
                                                        }
                                                    </th>
                                                ))}
                                            </tr>
                                        ))}
                                    </thead>