Tengo un accesorio que es una matriz de objetos y estoy tratando de ordenar por diferentes campos como id, ciudad, etc. Por alguna razón, mi estado no cambia en el DOM, pero cuando hago un console.log cambia. Estoy usando ganchos de reacción y ordeno como la clave para la que quiero ordenar los campos

 import { useEffect } from 'react' import { useState, useCallback } from 'react' import type { City } from 'api/getCities'; import SortableTableColumnHeader from './SortableTableColumnHeader'; import SortableTableCell from './SortableTableCell'; import s from './SortableTable.module.css' interface CityProps { cities: City[] } export default function SortableTable(props: CityProps): JSX.Element { const { cities } = props const [formattedCities, setFormattedCities] = useState<City[]>(cities) const [sort, setSort] = useState<string>('') useEffect(() => { if (sort === 'id') { const formattedById = cities.sort((a, b) => a.id - b.id) setFormattedCities(formattedById) } else { setFormattedCities(cities) } console.log(sort) }, [cities, sort]); const handleClick = useCallback((id: string, iso: string, city: string, capital: string, population: string, country: string) => { if (id) { setSort('id') // const formattedById = id === 'ASC' ? cities.sort((a, b) => a.id - b.id) : cities.sort((a, b) => b.id - a.id).reverse() } }, []) return ( <div role="table" className={s.table}> <div role="rowgroup" className={s.thead}> <SortableTableColumnHeader onClick={handleClick} /> </div> <div role="rowgroup" className={s.tbody}> {formattedCities.map((city) => { return <SortableTableCell key={city.id} {...city} /> })} {/* {formattedCities.length ? formattedCities.map((city) => { return <SortableTableCell key={city.id} {...city} /> }) : cities.map((city) => { return <SortableTableCell key={city.id} {...city} /> })} */} </div> </div> ) }