如何在加载后更新DataGrid？

import React, { useState, useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
];

const rows = [
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
];

function App() {
  const [data, setData] = useState(rows);

  useEffect(() => {
    const fetchData = async () => {
      // 模拟异步数据获取
      const response = await fetch('/api/data');
      const newData = await response.json();
      setData(newData);
    };

    fetchData();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={data} columns={columns} pageSize={5} />
    </div>
  );
}

export default App;

useEffect(() => {
  const intervalId = setInterval(() => {
    fetchData();
  }, 5000); // 每5秒更新一次数据

  return () => clearInterval(intervalId); // 清除定时器以避免内存泄漏
}, []);