React: удаление элемента из state родителя

Есть список, каждый элемент которого является компонентом (Item). Список строится из state родителя (List). Задача в том, чтобы при клике в Item, из state List удалялся соответствующий элемент. Я сделал это так: передал через props onClose функцию удаления в Item и вызывал ее уже оттуда.

И все это даже работало до тех пор, пока не потребовалось вызывать onClose после изменения state Item (внутри setTimeout). Если раскомментировать строку 27 в примере на jsfiddle, то странным образом state Item'а, находящегося под тем, который мы закрываем, меняется.

Живой пример: https://jsfiddle.net/69z2wepo/114657/

Код:

class Item extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            height: 0,
            opacity: 0
        };
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({height: '500'}, () => {
                setTimeout(() => {
                    this.setState({opacity: 1})
                },100)
            })
        },100)
    }
    close() {
        this.setState({opacity: 0}, () => {
            setTimeout(() => {
                this.setState({height: 0}, () => {
                    setTimeout(() => {
                        // Вот тут и начинается проблема
                        // this.props.onClose();
                    },100)
                })
            },100)
        })
    }
    render() {
        return (
            <div className="item-wrapper" style={{maxHeight: this.state.height + 'px'}}>
                <div className="item" onClick={this.close.bind(this)} style={{opacity: this.state.opacity}}>
                    {this.props.title}
                </div>
            </div>
        );
    }
}
class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
                {title: 'zero'},
                {title: 'one'},
                {title: 'two'},
                {title: 'three'},
                {title: 'four'},
                {title: 'five'},
                {title: 'six'},
                {title: 'seven'},
                {title: 'eight'},
                {title: 'nine'},
                {title: 'ten'},
            ]
        };
    }
    // Удаление элемента
    delete(item) {
        let newItems = this.state.items;
        if (newItems.indexOf(item) > -1) {
            newItems.splice(newItems.indexOf(item), 1);
            this.setState({items: newItems});
        }
    }
    render() {
        return (
            <div className="list">
                { this.state.items.map((item, i) => {
                    return (<Item key={i} title={item.title} onClose={this.delete.bind(this, item)} />)
                })}
            </div>
        );
    }
}
ReactDOM.render(
    <List />,
    document.getElementById('root')
);

Буду рад выслушать мнения о том, как это починить. Заранее благодарен.

P.S. Предвосхищая вероятные советы, скажу сразу, что про существование react-transition-group я знаю, но текущий вопрос не в выборе инструментов.