Esta es la mesa que tengo ahora. El problema es que cuando quiero ordenar, por ejemplo, la columna "Controlador", todas las demás columnas también se ordenan.

Quiero poder ordenarlos uno a la vez y solo cuando se hace clic.

 import './Table.css' import { useMemo } from 'react' import { COLUMNS } from './Columns' import { useTable, useSortBy, useFlexLayout } from 'react-table' import Data from './Data' const Table = () => { const columns = useMemo(() => COLUMNS, []) const data = useMemo(() => Data, []) const initialState = useMemo(() => Data, []) const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, toggleSortBy, } = useTable( { columns, data, initialState }, useSortBy, useFlexLayout ) return ( <div className='table-container'> <table {...getTableProps() }> <thead> { headerGroups.map((headerGroups) => ( <tr {...headerGroups.getHeaderGroupProps()}> {headerGroups.headers.map( (column) => ( <th {...column.getHeaderProps(column.getSortByToggleProps())} > {column.render('Header')}</th> ))} </tr> )) } </thead> ```