I have a `state` that contains objects. I also have a delete api that removes an object from the `state` based on a `object property`. Here is the code:

```
deleteItem(item_to_delete){
    const del_item = _.find(this.state.bucket_list, bucklistitem => bucklistitem.name === item_to_delete);
    fetch(url(this.props.api) + '/' + del_item._id, {
        method: "DELETE",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
    });

    _.remove(this.state.bucket_list, bucketlistitem => bucketlistitem.name === item_to_delete);
    this.setState({ bucket_list: this.state.bucket_list });
}

```

However I understand I am treating the `state` as mutable currently which is bad. Therefore, I want to change my code by creating a copy of the `state`, changing the copy, and `setState`. Here is the code:

```
deleteItem(item_to_delete){
    let bucket_list_copy = Object.assign({}, this.state.bucket_list); //Copy of state
    const del_item = _.find(bucket_list_copy, bucklistitem => bucklistitem.name === item_to_delete);
    fetch(url(this.props.api) + '/' + del_item._id, {
        method: "DELETE",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
    });

    _.remove(bucket_list_copy, { name: item_to_delete });
    this.setState({ bucket_list: bucket_list_copy });
}

```

However, although this deletes the object from the Database, it doesn't remove it from the `copied list`. Any ideas?