React does not delete item from array [duplicate]

I'm creating a simple todo app in React. I have three components. The 'Items' component is in charge of displaying and deleting items from the list. When I click on the 'Done' button next to an item, the index of the item is getting logged to the console but not getting deleted. My code is as follows,

//App.js
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {list:[]}
    this.addItem = this.addItem.bind(this)
    this.handleRemove = this.handleRemove.bind(this)
  }

  addItem(val) {
    let updated = [...this.state.list, val];
    this.setState({ list: updated });
  }
  
  handleRemove(key){ 
    const list = [...this.state.list]; 
  
    const updateList = list.filter(item => item.id !== key); 
  
    this.setState({ 
      list:updateList, 
    }); 
  
  } 

  render(){
    return (
    <div className="App">
      <Title itemCount={this.state.list.length}></Title>
      <Add addItem={this.addItem}></Add>
      <Items items={this.state.list} remove={this.handleRemove}></Items>
    </div>
  );
  }
  
}

//Items.js
const Items = ({items, remove}) => {
    return(
        <div className="Items">
            <ul>{items.map((item, index) => 
                <li key={index}>
                    {item}
                    <button onClick={() => remove(index)}>Done</button>
                </li>
                )}
            </ul>
        </div>
    );
}

What can I do to fix this? Thanks in advance!