When I select a column, the order is not preserved when the data is automatically reloaded and returns to the original order.

  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);
  };

The handleRequestSort does not seem to work.

<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>

How can I make sure it is preserved?