مشکل نمایش مقدار قبلی استیت prevState در componentDidUpdate

سلام خدمت اساتید عزیز

من با بخش componentDidUpdate مشکل دارم استیت قبلی رو بهم نمیده و استیت فعلی رو بهم میده. چیکار کنم مشکل کجاست؟
یک دکمه ساده جهت تست داخل رندر تعریف کردم که با اون عمل میکنه و استیت قبلی رو بهم میده.
اما با تابع add که نوشتم عمل نمیکنه... واقعا گیج شدم. لطفا راهنماییم کنید.

class App extends Component{
    state={
        products:[
            {id: 1, imgUrl: 'https://picsum.photos/100' , title: 'book1' , price: 25 , count: 3},
            {id: 2, imgUrl: 'https://picsum.photos/101' , title: 'book2' , price: 65 , count: 5},
            {id: 3, imgUrl: 'https://picsum.photos/102' , title: 'book3' , price: 33 , count: 7},
            {id: 4, imgUrl: 'https://picsum.photos/103' , title: 'book4' , price: 12 , count: 9}
        ],
        count:0
    }
    componentDidUpdate(prevProps,prevState){
        console.log(prevState)
    }
    render(){
        return <>
        <button onClick={()=>{this.setState({count: this.state.count + 1})}}>number: {this.state.count}</button>
        <Products products={this.state.products} add={this.add} remove={this.remove} />
        </>
    }

    add = (id)=>{
        const products = this.state.products.map(p=>{
            if (p.id === id) p.count++
            return p
        })
        this.setState({products})
    }