fresh learner in react here...I'm trying to update a set of data fetched via an API with a custom information (it's a ticketmaster API website, i get the information on the show, when adding to the basket i would like to add to that set of data the number of tickets selected). The idea was to move "number" inside "items"

  const [cart, setCart] = useState({
    display: "none",
    items: [],
    number: 0,
  })

when i click to ad to cart button

setCart({ ...cart, items: [...cart.items, data,data["ticketInCart"] = counter], number:counter})

...as i want to keep the old information, (hence the spread operator ...cart), keep what i have in cart.items, add a new element (data), then add "ticketInCart" to data...

this works, and cart.items will have new informations as well as a variable named ticketInCart with the right information, but when i do console.log strangely i also find a "1: 1" and a length of 2 at the end of the array (where the first number is the index, the second number is the ticketInCart value)

Object { items: (2) […], number: 1, display: "block" }
display: "block"
items: Array [ {…}, 1 ]
0: Object { name: "Anastasia (Touring)", type: "event", id: "k7vGF4MnED7Au", … }
1: 1
length: 2
<prototype>: Array []
number: 1
<prototype>: Object { … }

how do i add a variable to the object avoiding the creation of another element each time i do so?