Добавление и удаление элементов массива через input number в react

Есть input number, с помощью которого я управляю количеством элементов в массиве. Сам массив состоит только из id.

Вот код:

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

<input type="number" value={Arr.length || ''} min={0} onChange={event => {
   const Item = { id: event.target.value }                
   setArr([...prev, Item])
}} />

Я использую Arr.length в качестве текущего значения. Это прекрасно добавляет значение массива. Но когда нажимается стрелка вниз, значения все равно добавляются. Нужно, чтобы при нажатии стрелки вверх массив добавлял значения, а при нажатии стрелки вниз удалял последнее значение массива. И возможность вводить значение вручную. Например, было 5, а я ввел число 15. И это добавило 15 значений в массив.

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

Это рендеринг компонента. Я не могу понять, как вывести количество, указанное во входном числе, с возможностью передачи значения id, тут Item.id.

Пожалуйста, подскажите, как это лучше всего сделать?! Спасибо!

первоначальное решение

const [Count, setCount] = useState('1')

регулятор значения

<input type="number" value={Count || ''} min={0} 
   onChange={event => {
      setCount(event.target.value)
   }} 
/>

рендер компонентов по кол-ву

[...Array(parseInt(Count))].map((_, i) => (
   <Component key={i} id={i} />
))