Material-UI - Unable to click in multiline TextField inside Draggable Dialog - reactjs

Question

I have a draggable dialog with a couple of text fields for a user to fill in and submit. However, when I set the multiline option on a TextField, I am no longer able to click in the field and type. I can only type inside the field if I tab into it. The TextFields that are not multiline work the way I want. How do I make it so that I can click and type into the multiline TextField???
A couple code snippets included here...
This is from the Draggable Dialog:
function PaperComponent(props) {
return (
<Draggable cancel="input">
<Paper {...props} />
</Draggable>
);
}
const GenericDialog = props => {
return (
<Dialog
disableBackdropClick
disableEscapeKeyDown
disableRestoreFocus
fullWidth={true}
maxWidth={props.maxWidth}
open={props.open}
onClose={props.onClose}
PaperComponent={PaperComponent}
>
<DialogTitle>{props.dialogTitle}</DialogTitle>
{props.children}
<DialogActions>
<Button onClick={props.onSubmit} color="primary">
Submit
</Button>
<Button onClick={props.onClose} color="secondary" autoFocus>
Cancel
</Button>
</DialogActions>
)}
</Dialog>
This is how the text field that I am unable to click/type into is defined:
<TextField
style={{ margin: 0, width: '350px' }}
label="Task Description"
helperText="(1024 character maximum)"
inputProps={{ maxLength: 1024 }}
multiline
rows="4"
onChange={this.handleChange('taskDescription')}
value={this.state.task.taskDescription}
variant="outlined"
/>

Answer 1

My confusion was that I thought the TextField was an input. But with the multiline prop, it is instead a textarea. To resolve the problem, I changed the Draggable cancel prop to: cancel="input, textarea"

Answer 2

<TextField
style={{ margin: 0, width: '350px' }}
label="Task Description"
helperText="(1024 character maximum)"
inputProps={{ maxLength: 1024 }}
multiline
rows="4"
autoFocus={true}
onChange={this.handleChange('taskDescription')}
value={this.state.task.taskDescription}
variant="outlined"/>