Redux: State is only being updated in one place - reactjs

Question

I'm new to redux, I am trying to update state through props in my Survey Component.
In my console.log, the state in my reducer is being updated, but my app state is staying the same.
in my Router.js
const intialState = {
currentQuestionId: 1,
}
function reducer(state = intialState, action) {
console.log('reducer', state, action)
switch (action.type) {
case 'INCREMENT':
return {
currentQuestionId: state.currentQuestionId + 1,
}
case 'DECREMENT':
return {
currentQuestionId: state.currentQuestionId - 1,
}
default:
return state
}
}
const store = createStore(reducer)
const Router = () => (
<BrowserRouter>
<Switch>
<Provider store={store}>
<Route path="/survey/:surveyName" component={CNA} />
<Route component={NotFound} />
</Provider>
</Switch>
</BrowserRouter>
)
in Survey.js
class Survey extends Component {
constructor(props) {
super(props)
this.state = {
currentQuestionId: 1,
}
}
previousQuestion = () => {
this.props.decrement()
}
nextQuestion = () => {
this.props.increment()
}
render() {
const { currentQuestionId } = this.state
const { questions } = this.props
return (
<SurveyContainer>
{console.log('surveyState', currentQuestionId)}
<Question
data={questions.find(q => q.id === currentQuestionId)}
/>
<ButtonContainer>
{currentQuestionId > 1 && (
<Button type="button" onClick={this.previousQuestion}>
Previous
</Button>
)}
<Button type="button" onClick={this.nextQuestion}>
Next
</Button>
</ButtonContainer>
</SurveyContainer>
)
}
}
const mapDispatchToProps = {
increment,
decrement,
}
function mapStateToProps(state) {
return {
currentQuestionId: state.currentQuestionId,
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Survey)
My console.log
reducer {currentQuestionId: 5} {type: "INCREMENT"}
SurveyState 1
So it seems that my reducer is, in fact, changing the state, however, my Survey Component does not seem to be aware of these changes.