Update Array Item in React useState

App.jsx

import { useState } from "react";
import Message from "./components/Message";
import Motor from "./components/Motor"
import Uhuy from "./components/Uhuy"


const App = () => {
  let [data, setData] = useState({
      name: "",
      items: [
        {name: "A", total: 0},
        {name: "B", total: 0},
      ]
    });

  const updateItem = (i, e) => {
    const name = e.target.name;
    const value = e.target.value;


    setData((values) => {
      let currentValues ={...values};
      let currentItem = currentValues.items[i];

      if (name === "total") {
        currentItem.total = parseInt(value);
      } else if (name === "name") {
        currentItem.name = value;
      }

      return currentValues
      
    })
  }

  const addItem = () => {
    setData((values) => {
      let currentValues = {...values};
      currentValues.items.push({name: "", total: 0});
      return currentValues
    })
  }

  return (
    <>
    <div>
      <button onClick={addItem}>Add Items</button>
    </div>
      {data.items.map((item, i) => (
        <div key={i}>
          <input type="text" name="name" value={item.name} onChange={(e) => updateItem(i, e)} />
          <input type="number" name="total" value={item.total} onChange={(e) => updateItem(i, e)} />
        </div>
      ))}

      <ul>
      {data.items.map((item, i) => (
        <li key={i}>{item.name} - {item.total}</li>
      ))}
      </ul>
      
    </>
  )
}

export default App