Unable to type text inside of material UI TextField

Question

I have a button whose onclick opens up a material UI Dialog which contains a TextField. However, I can't click into the TextField to enter anything. Also, when I click on my button to open the Dialog, I get the error "findDOMNode is deprecated in StrictMode". Seems like that shouldn't affect the functionality based on other answers though.

Everything works normal if I change it to a div containing a normal input field, so it seems like a Material UI problem.

const [open, setOpen] = useState(false);
const [body, setBody] = useState("");
const [errors, setErrors] = useState({});


const handleOpen = () => {
    setOpen(true);
};

const handleClose = () => {
    props.clearErrors();
    setOpen(false);
    setErrors({});
};

const handleChange = (e) => {
    setBody(e.target.value);
};

const handleSubmit = (e) => {
    e.preventDefault();
    props.newPost({ body: body });
};

const { UI: { loading }} = props;

    return (
      <React.Fragment>
        <button onClick={handleOpen}>
          <AddIcon />
        </button>
        <Dialog
          open={open}
          onClose={handleClose}
          fullWidth
          maxWidth="sm">
          <button onClick={handleClose}>
            <CloseIcon />
          </button>
          <DialogTitle>Create a new post</DialogTitle>
          <DialogContent>
            <form onSubmit={handleSubmit}>
              <TextField
                name="body"
                type="text"
                multiline
                rows="3"
                onChange={handleChange}
                fullWidth
              />
              <button
                type="submit"
                variant="contained"
                color="primary"
              >
                Submit
                {loading && (
                  <CircularProgress/>
                )}
              </button>
            </form>
          </DialogContent>
        </Dialog>
      </React.Fragment>
    );
}

Answer 1

It should work. Do some styles, add label, placeholder etc.

check the working demo here and see the code

Code snippet

<React.Fragment>
      <button onClick={handleOpen}>Add</button>

      <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
        <button onClick={handleClose}>X</button>
        <DialogTitle>Create a new post</DialogTitle>
        <DialogContent>
          <form className={classes.root} onSubmit={handleSubmit}>
            <TextField
              name="body"
              label="Enter some text"
              multiline
              rows="3"
              onChange={handleChange}
              fullWidth
              placeholder="placeholder"
            />
            <button type="submit" variant="contained" color="primary">
              Submit
              {false && <CircularProgress />}
            </button>
          </form>
        </DialogContent>
      </Dialog>
    </React.Fragment>

Style

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
      width: "50ch"
    }
  }
}));