I have an array, an entry to which I add on button click. But I want to add the current index of the map() method to the array id.

const [Arr, setArr] = useState([{ id: 0, value: "text" }]);

<button onClick={() => {
    const Item = { id: null, value: "text" };
    setArr([...prev, Item]);
  }}
>+</button>
    
{Arr.map((item, i) => {
   return(<Component key={i} />)
})}

How do I put the current index i in the id array in the button click event?