Save function no longer works when changing to Material-UI dependency - React

I changed my ReactJS code to incorporate the Material-UI dependency, however now it appears that the "save" functionality to reassign the value of the info passed no longer works...

The app is a simple Todo list with local CRUD functionality - Adding a new task works and deleting a specific task works, however, originally when editing a task name it would persist the new name. But now the task name simply vanishes when clicking on the "save" button.

Here is a codesandbox with all of the code.

Here is the file with the save function in

import React from 'react';
import TextField from 'material-ui/TextField';
import {
  Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn,
} from 'material-ui/Table';
import FlatButton from 'material-ui/FlatButton';

export default class TodosListItem extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isEditing: false
    };
  }

  renderTaskSection() {
    const { task, isCompleted } = this.props;

    const taskStyle = {
      color: isCompleted ? 'green' : 'red',
      cursor: 'pointer'
    }

    if (this.state.isEditing) {
      return (
        <TableRowColumn>
          <form onSubmit={this.onSaveClick.bind(this)}>
            <TextField name={task} type="text" defaultValue={task} ref="editInput" />
          </form>
        </TableRowColumn>
      )
    }

    return (
      <TableRowColumn style={taskStyle} onClick={this.props.toggleTask.bind(this, task)}>
        {task}
      </TableRowColumn>
    )
  }

  renderActionSection() {
    if (this.state.isEditing) {
      return (
        <TableRowColumn>
          <FlatButton onClick={this.onSaveClick.bind(this)}>Save</FlatButton>
          <FlatButton onClick={this.onCancelClick.bind(this)}>Cancel</FlatButton>
        </TableRowColumn>
      );
    }
    return (
      <TableRowColumn>
        <FlatButton onClick={this.onEditClick.bind(this)}>Edit</FlatButton>
        <FlatButton onClick={this.onDeleteClick.bind(this)}>Delete</FlatButton>
      </TableRowColumn>
    );
  }

  render() {
    return (
      <TableRow>
        {this.renderTaskSection()}
        {this.renderActionSection()}
      </TableRow>
    )
  }

  onEditClick() {
    this.setState({ isEditing: true });
  }

  onCancelClick() {
    this.setState({ isEditing: false });
  }

  onSaveClick(event) {
    event.preventDefault();
    const oldTask = this.props.task;
    const newTask = this.refs.editInput.value;
    this.props.saveTask(oldTask, newTask);
    this.setState({ isEditing: false });
  }

  onDeleteClick() {
    const taskToDelete = this.props.task;
    this.props.deleteTask(taskToDelete);
  }
}