I have input number in which I specify a number that stands for the number of rendered components. For this I have two states with a number and an array. In the array I just pass one value with id.

Can you tell me how I can control the number of entries in the array in the onchange event? Here is the code, and inside the loop Array.from(parseInt(Quantity)).map((_, i) => { ... }) is not the correct code. Can you tell me how can I fix it?

const [Quantity, setQuantity] = useState('0')
const [Arr, setArr] = useState([{ id: 0 }])

<input type="number" value={Quantity || ""} min={0} onChange={(event) => {
    setQuantity(event.target.value)
    Arr.from(parseInt(Quantity)).map((_, i) => {
      setArr((prev) => {
        [...prev, { id: Quantity }]
      })
    })
}} />

render components

Arr.map((Item) => (
  <Components key={Item.id} id={Item.id} />
))

The problem is in this part of the code:

...
Arr.from(parseInt(Quantity)).map((_, i) => {
  setArr((prev) => {
    [...prev, { id: Quantity }];
  })
})
...

Could you please advise me how can I do this correctly to update the array quantity with id depending on Quantity? Thanks!