I have the following object in default state:

const [data, setData] = useState({name: "", products: []})

I have 2 Select elements with an onChange event handler:

<Select onChange={() => setData({...data, products: [...data.products, {id: 1, ...data.products[0]}]})})</Select>

<Select onChange={() => setData({...data, products: [...data.products, {...data.products[0], qty: 1}]})})</Select>

When I do a

console.log(data);

I get {name: "", products[{qty: 1},...]} only. How do I make this so the id is appended to the array as well?