Реагировать на обратный вызов хуков в устаревшем объекте состояния

Question

Я новичок в реагировании, и перехватывает API, и я пытаюсь понять, как реагирует, отслеживает состояние.

Я попытался создать компонент таблицы, который принимает конфигурацию столбца и строки в качестве входных данных. , Столбцы имеют функции обратного вызова, которые вызываются, например, при нажатии на заголовок столбца, чтобы родитель мог, например, сортировать строки. Однако при вызове обратного вызова для строк всегда устанавливается значение по умолчанию. Почему это происходит? Это из-за того, как работает closuer в javascript? Есть ли способ получить доступ к «последнему» состоянию элементов внутри моей функции обратного вызова?

Вот упрощенная версия моего компонента, https://codepen.io/Abrissirba/pen/OJyPvXx. Начните с добавления пары строк, затем нажмите Столбец 1, чтобы отсортировать таблицу. элементы теперь будут установлены в начальное значение, и поэтому добавленные строки исчезнут.

function DetailsListHookComponent({items, columns}) { 
  return (
    <table>
      <thead>
        <tr>
          {columns.map(x => (<td key={x.key} onClick={() => x.onClick(x)}>{x.title}</td>))}
        </tr>
      </thead>
      <tbody>
      {items.map(x => {
       return (
        <tr key={x.id}>
          {columns.map(y => <td key={y.key}>{x[y.key]}</td>)}
        </tr>)
      })}
    </tbody>
    </table>
  )
}

let newId = 3;
function ContainerComponent() {
  const [items, setItems] = React.useState([
    {id: 1, 1: 1, 2:2}, 
    {id: 2, 1:10, 2:20}
  ]);

  const [columns, setColumns] = React.useState([{
    key: 1,
    title: 'Column 1',
    sortOrder: '1',
    onClick: (column) => {
      const dir = column.sortOrder * -1;
      setItems([...items.sort((a, b) => {
        const order = a['1'] > b['1'] ? 1 : a['1'] < b['1'] ? -1 : 0;
        return order * dir;
      })]);

      setColumns([{
        ...column, 
        sortOrder: dir
      }]);
    }
  }]);

  return (
    <>
      <DetailsListHookComponent items={items} columns={columns}></DetailsListHookComponent>
      <button onClick={() => setItems([...items, {id: newId++, 1: newId*10, 2: newId*20}])}>Add</button>
    </>
  )
}