在材料表中默认隐藏列并使用 ColumnsButton 切换其可见性的问题

Question

我正在尝试使用 hidden 属性隐藏 Material-Table 中的一列，同时仍然能够使用 ColumnsButton 切换其可见性。但是，当我将 hidden 属性设置为 true 时，它不仅从表中隐藏了该列，而且还将它从 ColumnsButton 中删除，从而阻止我将其重新打开。

我试过使用 hiddenByColumnsButton 属性，它成功地从表中隐藏了该列并在 ColumnsButton 中返回一个未选中的复选框，但是当我点击它时，我得到一个错误：

import MaterialTable from 'material-table';

const columns = [
  { title: 'Name', field: 'name' },
  { title: 'Surname', field: 'surname' },
  { title: 'Birth Year', field: 'birthYear', type: 'numeric', hidden: true },
  { title: 'Birth Place', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } },
];

const data = [
  { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
  { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
];

export default function App() {
  return (
    <MaterialTable
      title="Demo Title"
      columns={columns}
      options= {{
        toolbar: true,
        columnsButton: true,
        exportAllData: true,
        filtering: true,
        search: false,
        paging: true,
        pageSize: 10,
        exportButton: true,
        headerStyle: {
          position: 'sticky',
          top: '0',
        },
        rowStyle: {
          fontSize: 12,
        },
      }}
      data={data}
    />
  );
}

谁能帮我弄清楚如何在默认情况下隐藏 Material-Table 中的列，但仍然能够使用 ColumnsButton 切换其可见性？提前谢谢你。