Material-table in React: Pagination, Filter, and Sort Reset When Data Changes

Question

I'm using material-table in my React.js application, and I'm experiencing an issue where the pagination, filter, and sort settings reset automatically whenever the table's data changes. This behavior disrupts the user experience as it forces users to reapply their settings each time the data updates.

Assume this is my code

import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';

const MyTableComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Simulate data fetching
    const fetchData = async () => {
      const result = await fetch('/api/data');
      const data = await result.json();
      setData(data);
    };

    fetchData();
  }, []);

  return (
    <MaterialTable
      title="My Data Table"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Age', field: 'age' },
        { title: 'Country', field: 'country' },
      ]}
      data={data}
      options={{
        sorting: true,
        filtering: true,
        pagination: true,
      }}
    />
  );
};

export default MyTableComponent;