MobX ReactJS AntD updates won't re-render

Question

So I'm trying change some table data within my AntD Table using ReactJS and MobX. The data in my MobX observable changes, but the table doesn't re-render an update until I say.... resize the page and the table re-renders. I've recreated my issue on CodeSandbox - it's not the exact data type, but this is the EXACT issue I'm running into, any thoughts???

https://codesandbox.io/s/remove-items-from-mobx-array-forked-3nybr?file=/index.js

  @action
  change = (key) => {
    this.data
      .filter(item => key === item.key)
      .forEach(piece => {
        piece.key = 10;
      });
    console.log(this.data);
  };

const FooTable = () => {
  const columns = [
    {
      title: "ID",
      dataIndex: "key"
    },
    {
      title: "Name",
      dataIndex: "name"
    },
    {
      title: "Last Name",
      dataIndex: "lastName"
    },
    {
      title: "Actions",
      render: (text, record) => {
        return (
          <Button
            type="link"
            icon="delete"
            onClick={() => tableStore.change(record.key)}
          >
            Delete
          </Button>
        );
      }
    }
  ];
  return useObserver(() => {
    return <Table columns={columns} dataSource={tableStore.data} />;
  });
};

Answer 1

Because AntD Table is not observer by itself you need to use toJS on your data before you pass it to AntD.

import { toJS } from "mobx";

// ...

const FooTable = () => {
  const columns = [ ... ];

  return useObserver(() => {
    return <Table columns={columns} dataSource={toJS(tableStore.data)} />;
  });
};