React form handleChange is not updating state - react-redux

Question

Form input onChange is not updating state. The action and reducer fire properly and backend rails API is updated, but the state does not change and nothing renders in the DOM.
I have used console logs to ensure that the action and reducer are working properly.
import React, { Component } from 'react';
import { Button, Form } from 'semantic-ui-react'
import { connect } from 'react-redux'
class TaskInput extends Component {
constructor() {
super()
this.state = {
name: ""
}
}
handleChange = (e) => {
this.setState({
name: e.target.value
})
}
handleSubmit = (e) => {
e.preventDefault()
this.props.addTask({name: this.state.name}, this.props.goal.id)
this.setState({
name: ''
})
}
render() {
return (
<Form className="new-task-form" onSubmit={(e) =>this.handleSubmit(e)}>
<Form.Field>
<label className="form-label">Add Task</label>
<input id="name" required value={this.state.name} onChange={(e) => this.handleChange(e)} />
</Form.Field>
<Button basic color='purple' type="submit">Add Task</Button>
<hr/>
</Form>
)
}
}
export default connect()(TaskInput)
import React, { Component } from 'react'
import { addTask, deleteTask } from '../actions/tasksActions'
import { connect } from 'react-redux'
import { fetchGoal } from '../actions/goalsActions'
import Tasks from '../components/Tasks/Tasks';
import TaskInput from '../components/Tasks/TaskInput';
class TasksContainer extends Component {
componentDidMount() {
this.props.fetchGoal(this.props.goal.id)
}
render(){
return(
<div>
<TaskInput
goal={this.props.goal}
addTask={this.props.addTask}
/>
<strong>Tasks:</strong>
<Tasks
key={this.props.goal.id}
tasks={this.props.goal.tasks}
deleteTask={this.props.deleteTask}
/>
</div>
)
}
}
const mapStateToProps = state => ({
tasks: state.tasksData
})
export default connect(mapStateToProps, { addTask, deleteTask, fetchGoal })(TasksContainer);
export default function taskReducer(state = {
loading: false,
tasksData: []
},action){
switch(action.type){
case 'FETCH_TASKS':
return {...state, tasksData: action.payload.tasks}
case 'LOADING_TASKS':
return {...state, loading: true}
case 'CREATE_TASK':
console.log('CREATE Task', action.payload )
return {...state, tasksData:[...state.tasksData, action.payload.task]}
case 'DELETE_TASK':
return {...state, loading: false, tasksData: state.tasksData.filter(task => task.id !== action.payload.id )}
default:
return state;
}
}
handleSubmit calls the action to addTask. handleChange updates state and renders the new task in DOM. handleSubmit is working. handleChange is not.