Почему не обновляется props?

import "bootstrap/scss/bootstrap.scss"
import React, {Component} from "react"
import {render} from "react-dom"
import {createStore} from "redux"
import {Provider} from "react-redux"
import App from "./App"

// reducer
let initialState = {counter:0};
let counterReducer = (state=initialState,action)=>{
    let newstate=state
    switch(action.type){
        case "INC":
            newstate.counter+=action.payload
            return newstate
        case "DEC":
            newstate.counter+=action.payload
            return newstate
        default:
            return newstate
    }
}


let store = createStore(counterReducer)

render(
    <Provider store={store}>
        <div className="container">
            <App/>
        </div>
    </Provider>,
    document.getElementById("root")
)

import React, {Component} from "react"
import {render} from "react-dom"
import {createStore} from "redux"
import { connect } from "react-redux";



class App extends Component{
    constructor(props){
        super(props)
    }

    incrementEvent(){
        console.log(this.props.pState.counter)
        this.props.inc()
    }


    render(){
        return(
            <div>
                <h3>counter:{this.props.pState.counter}</h3>
                <button className="btn btn-default" onClick={()=>this.incrementEvent()}> button </button>
            </div>
        )
    }
}

let mapStateToProps= state=>({pState:state})
let mapDispatchToProps = dispatch=>({
    inc: ()=>{
        dispatch({type:"INC",payload:10})
    }
})
const DefaultApp = connect(mapStateToProps,mapDispatchToProps)(App)
export default DefaultApp