Невозможно изменить состояние в заголовке таблицы материалов при использовании удаленных данных

Я поместил простое логическое состояние в настраиваемый заголовок, план состоит в том, чтобы сделать это состояние элементом управления раскрывающимся меню. Я использовал простой onClick для этого настраиваемого заголовка, который установил для состояний противоположное значение и после этого записал состояние. Но состояние остается прежним и не меняется при каждом нажатии.

Это происходит, когда я устанавливаю столбцы с начальным setState, потому что мне нужно, чтобы моя таблица была полностью на стороне сервера. При установке столбцов с нормальным пусть он работает, но это не особая необходимость.

заголовок выделен, щелкните по нему, и вы увидите журнал состояния в консоли.

export default function PositioningActionsColumn() {
  const [stateData, setStateData] = useState([]);
  const [stateColumns, setStateColumns] = useState([]);
  const [isOpen, setIsOpen] = useState(false);

  // setting the columns and data - will be from a fetch later
  useEffect(() => {
    setStateColumns([
      {
        title: nameHeader,
        field: "name"
      },
      {
        title: "Surname",
        field: "surname",
        initialEditValue: "initial edit value"
      },
      { title: "Birth Year", field: "birthYear", type: "numeric" },
      {
        title: "Birth Place",
        field: "birthCity",
        lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
      }
    ]);
    setStateData([
      { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
      { name: "Zerya Betül", surname: "Baran", birthYear: 2017, birthCity: 34 }
    ]);
  }, []);

  const orderFunc = (orderedColumnId, orderDirection) => {
    console.log(
      "orderedColumnId:",
      orderedColumnId,
      "orderDirection:",
      orderDirection
    );
  };

  const searchFunc = e => {
    console.log(e);
  };

  const handleClick = () => {
    setIsOpen(!isOpen);
    console.log(isOpen);
  };

  const nameHeader = (
    <div style={{ background: "lightblue" }} onClick={handleClick}>
      Click on this custom Name Header
    </div>
  );

  return (
    <MaterialTable
      title="Editable Preview"
      icons={tableIcons}
      columns={stateColumns}
      data={stateData}
      onOrderChange={(orderedColumnId, orderDirection) => {
        orderFunc(orderedColumnId, orderDirection);
      }}
      onSearchChange={e => searchFunc(e)}
      options={{ draggable: false, selection: true, actionsColumnIndex: -1 }}
      actions={[
        {
          tooltip: "Remove All Selected Users",
          icon: "delete",
          onClick: (evt, data) => {
            console.log({ data });
            alert("You want to delete " + data.length + " rows");
          }
        },
        {
          isFreeAction: true,
          tooltip: "FreeAction",
          icon: () => <div>Free</div>,
          onClick: (evt, data) => {
            console.log({ data });
          }
        }
      ]}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              {
                console.log({ newData });
                const data = stateData;
                data.push(newData);
                setStateData(data, () => resolve());
              }
              resolve();
            }, 1000);
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              {
                console.log({ newData }, { oldData });
                const data = stateData;
                const index = data.indexOf(oldData);
                data[index] = newData;
                setStateData(data, () => resolve());
              }
              resolve();
            }, 1000);
          }),
        onRowDelete: oldData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              {
                console.log({ oldData });
                let data = stateData;
                const index = data.indexOf(oldData);
                data.splice(index, 1);
                setStateData(data, () => resolve());
              }
              resolve();
            }, 1000);
          })
      }}
    />
  );
}

https://codesandbox.io/s/material-table-testing-actions-position-and-output-2-sj1tt