Cuando selecciono una columna, el orden no se conserva cuando los datos se recargan automáticamente y vuelven al orden original.

 const [data, setData] = useState([]); const [order, setOrder] = useState("asc"); const [orderBy, setOrderBy] = useState("category"); useEffect(() => { const fetchData = async () => { const result = await axios( `https://example.com/api/v1/news?orderBy=${orderBy}&order=${order}` ); setData(result.data); }; const interval = setInterval(() => { fetchData(); }, 120000); return () => clearInterval(interval); }, []); const handleRequestSort = (event, property) => { const isAsc = orderBy === property && order === "asc"; setOrder(isAsc ? "desc" : "asc"); setOrderBy(property); };

El handleRequestSort no parece funcionar.

 <MaterialTable data={data} onRequestSort={handleRequestSort} columns={[ { title: "Category", field: "category", render: (rowData) => { return <span>{rowData.category}</span>; }, }, { title: "Type", field: "type", render: (rowData) => { return <span>{rowData.type}</span>; }, }, ]} ></MaterialTable>

¿Cómo puedo asegurarme de que se conserva?