Fix the duplicated total — find the bug

function App() {
  const [items, setItems] = React.useState(["a", "b", "c"])
  const [total, setTotal] = React.useState(3)
  return (
    <div>
      <p id="total">{total}</p>
      <button id="add" onClick={() => setItems([...items, "d"])}>add</button>
    </div>
  )
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)