如何使用material-table实现远程数据的乐观渲染？

import MaterialTable from 'material-table';

const tableColumns = [
  { title: 'ID', field: 'id' },
  { title: 'Name', field: 'name' },
  { title: 'Age', field: 'age' },
];

const tableData = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
  // 远程数据源的数据将在后面的步骤中获取
];

const tableOptions = {
  // 配置选项，例如分页、排序等
};

const fetchData = async (query) => {
  try {
    const response = await fetch('https://api.example.com/data', {
      method: 'POST',
      body: JSON.stringify(query),
      headers: {
        'Content-Type': 'application/json',
      },
    });

    const data = await response.json();

    // 更新表格的数据源
    setState((prevState) => ({
      ...prevState,
      data: data.results,
      totalCount: data.totalCount,
    }));
  } catch (error) {
    console.error('Error:', error);
  }
};

render() {
  return (
    <MaterialTable
      columns={tableColumns}
      data={tableData}
      options={tableOptions}
      title="Remote Data Example"
      onQueryChange={(query) => fetchData(query)}
    />
  );
}