because the data of your DetailComponent comes from state. Clicking on li,state will change, and there will be a unified re-render for Synchronize, a component that applies state.

if you want each click to be different, you can create a new array in state. And then through map li to achieve.
like this:

arr.map((item, index)=>{
    <li>item.date</li>
})

you need to record the item.id you currently clicked in state.

that.state.list.map(function(item,index){
    return (
    
        <li onClick={() => this.setState({selectedId: item.id})}>{}
        {this.state.selectedId === item.id?
            <DetailComponent data={this.state.date}/>
        :null
        }
        </li> (index )
    )
})