CollectionIndex

() => (
  <List>
    <ListItem id="1">Item 1</ListItem>
    <ListItem id="2">Item 2</ListItem>
    <ListItem id="3">Item 3</ListItem>
    <ListItem id="4">Item 4</ListItem>
  </List>
)

({ onClick }) => {
  const [list, setList] = React.useState(dynamicList);
  const [removedIndex, setIndex] = React.useState(-1);
  return (
    <>
      <button
        onClick={() => {
          setList(dynamicList);
        }}
      >
        Reset
      </button>{' '}
      <button
        onClick={() => {
          setList([...list, ++i]);
        }}
      >
        Add item
      </button>{' '}
      <button
        onClick={() => {
          // remove an item from the list randomly
          const randomIndex = Math.floor(Math.random() * list.length);
          setIndex(randomIndex);
          setList(list.filter((_, i) => i !== randomIndex));
        }}
      >
        Remove an item randomly
      </button>{' '}
      {removedIndex !== -1 ? `Removed index ${removedIndex}` : ''}
      <List>
        {list.map((item) => (
          <ListItem key={item} id={item} onClick={onClick}>
            Item {item}
          </ListItem>
        ))}
      </List>
    </>
  );
}