Стилизация карты приводит к тому, что TextField теряет фокус в Material UI + React

Я пытаюсь стилизовать свою карточку так, чтобы она не была такой большой, но проблема в том, что каждый раз, когда я это делаю, мое TextField теряет свою функциональность, и я должен продолжать нажимать на TextField, потому что он продолжает терять фокус. Мне нужно уменьшить размер компонента Card без потери функциональности TextField.

https://codesandbox.io/s/mutable-monad-dsvf8?file=/src/index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import TextField from "@material-ui/core/TextField";
import CreateIcon from "@material-ui/icons/Create";
import Box from "@material-ui/core/Box";
import CardMedia from "@material-ui/core/CardMedia";
import MuiAlert from "@material-ui/lab/Alert";
import Snackbar from "@material-ui/core/Snackbar";
import { withStyles } from "@material-ui/core/styles";

const PetitionCard = () => {
  const StyledCard = withStyles({
    root: { height: 450, width: 350 }
  })(Card);

  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [open, setOpen] = useState(false);
  const [petition, newPetition] = useState(false);

  const handleTitleChange = event => {
    setTitle(event.target.value);
  };

  const handleDescriptionChange = event => setDescription(event.target.value);

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
  };

  const Alert = props => <MuiAlert elevation={6} variant="filled" {...props} />;

  const Message = (message, severity) => {
    return (
      <Snackbar open={!open} autoHideDuration={3000} onClose={handleClose}>
        <Alert severity={severity}>{message}</Alert>
      </Snackbar>
    );
  };

  const clearField = event => {
    setOpen(true);
    if (title.length > 0 && description.length > 0) {
      setTitle("");
      setDescription("");
      return (
        <Message
          open={open}
          message={"You have successfully created a petition!"}
          severity={"success"}
        />
      );
    } else {
      return (
        <Message
          message={"You have one more more fields missing"}
          severity={"error"}
        />
      );
    }
  };
  return (
    <StyledCard>
      <Box mt={1}>
        <Grid container justify="center">
          <TextField
            id="outlined-multiline-static"
            multiline
            rows={1}
            variant="outlined"
            placeholder="Title"
            value={title}
            onChange={handleTitleChange}
          />
        </Grid>
      </Box>

      <CardMedia title="Petition" style={{ height: 0, paddingTop: "40.25%" }} />

      <Box mt={1} justify="center">
        <Grid container justify="center">
          <TextField
            size="small"
            inputProps={{
              style: { fontSize: 15 }
            }}
            id="outlined-multiline-static"
            multiline
            rows={5}
            placeholder="Description"
            variant="outlined"
            value={description}
            onChange={handleDescriptionChange}
          />
        </Grid>
      </Box>

      <Box mt={1}>
        <Grid container justify="center">
          <Button onClick={clearField}>
            <CreateIcon />
            Create Petition!
          </Button>
        </Grid>
      </Box>
    </StyledCard>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <PetitionCard />
  </React.StrictMode>,
  rootElement
);