why react component state is not updating - reactjs

Question

I have a Like component on a product page. The component is a button that when clicked, that product is put in the states liked array. The problem is when I change products and click the button the second product is not added to the array, rather it replaces the other product that's in the array. For example. I click on a shirt, I see that its been added to the array. I go back and click another shirt and instead of both shirts being in the array only the last shirt I clicked is in the array. Below is the product details page that includes the Like component and the Like page
class Details extends Component {
render() {
const { id } = this.props.match.params;
const productList = this.props.products.map(product => {
if (product.product_id == id) {
return (
<div className="container product_details">
<div className="left">
<div className="images">
<img className="detail_main-photo" src={product.image} />
</div>
</div>
<div className="right">
<h2 className="detail_heading">{product.title}</h2>
<p className="detail_description">{product.description}</p>
<div className="detail_size">
</div>
<p className="detail_price">${product.price}</p>
<Likes product={product} />
</div>
</div>
)
}
})
return (
<div >
{productList}
</div>
)
}
}
export default Details;
class Likes extends Component {
state = {
likes: []
}
addLike = () => {
const button = document.querySelector('.submit')
const Liked = this.state.likes.findIndex(like => {
return like.id === this.props.product.product_id
})
if (Liked) {
const { product } = this.props;
const newLike = {
id: product.product_id,
image: product.image[0],
title: product.title,
price: product.price
}
this.setState({
likes: [...this.state.likes, newLike]
})
}
}
render() {
console.log(this.state)
return (
<button className="submit" onClick={this.addLike}>Add To Wishlist</button>
)
}
}
export default Likes;