React Add/Remove list of customize components - reactjs

Question

I want my items could be add or removed.
Add items is ok, but remove one item will cause rest of items removed either.
I have tried the plain Object Array could be add/remove by these two functions, but the react element array can not work the same.
Here is I referenced the Delete function.
Here is my problem screen shot.
Here is code sandbox.
Anyone have suggestions?
Here is code:
import React, { useState, useRef, useCallback, useImperativeHandle } from 'react';
export default function List() {
const [itemList, setItemList] = useState([]);
const itemListRef = useRef([]);
const onDeleteProduct = useCallback(index => {
console.log("delete " + index);
setItemList(
itemList.filter((item, i) => i !== index)
);
})
function addSelectProduct() {
let index = itemList.length;
let newList = [];
newList.push(
<Item ref={r => itemListRef.current[index] = r}
number={index + 1} onDeleteProduct={() => onDeleteProduct(index)}
/>
);
setItemList(prevState => [...prevState,
...newList
]);
}
function allData() {
let len = itemListRef.current.lenth;
for(let i = 0; i < len; i++) {
console.log(itemListRef.current[i].getData());
}
}
return (
<>
<button onClick={addSelectProduct}>Add One</button>
<button onClick={allData}>show All data</button>
<table>
<thead>
<tr>
<th># No. </th>
<th>text </th>
<th>Operate</th>
</tr>
</thead>
<tbody>
{itemList}
</tbody>
</table>
</>
);
}
const Item = React.forwardRef(({ number, onDeleteProduct }, ref) => {
const [data, setData] = useState("");
useImperativeHandle(ref, () => ({
getData,
}));
const getData = () => {
return data;
}
return (
<tr key={number}>
<td>{number}</td>
<td><input value={data} onChange={e => setData(e.target.value)}/></td>
<td>
<button size="sm" variant="danger" onClick={() => onDeleteProduct(number)}>Delete</button>
</td>
</tr>
);
});

Answer 1

Looks like you don't have the last version of itemList. Maybe you should add itemList to the dependencies array of useCallback:
const onDeleteProduct = useCallback(index => {
console.log("delete " + index);
setItemList(
itemList.filter((item, i) => i !== index)
);
}, [itemList])
Furthermore, you should use a useCallback in addSelectProduct function too with its dependencies.