React.js useState的数据混乱问题

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {
  const [num, setNum] = useState(0);
  const [items, setItems] = useState([]);
  const increment = () => {
    console.log('join increment');
    setNum(preNum => {
      let newNum = preNum + 1;
      console.log('join setNum', newNum);
      setItems(preItems => [...preItems, newNum]);
      return newNum;
    });
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={increment}>
          {num}
        </button>
        <div>
          {
            items.map(item => (
              <div>{item}</div>
            ))
          }
        </div>
      </header>
    </div>
  );
}

export default App;

data-issue

代码和现象如上图所示，暂未找到错误原因。