Material-UI Outlined Input Label Incorrect Alignment

I'm having an issue with TextField labels and placeholder text rendering incorrectly with Material UI. I'm not sure why this is happening as I've copied and pasted directly from the Material-UI demos. I've tried messing with font-sizes in InputProps and InputLabelProps from reading other posts, but none of that has worked. For whatever reason, the label and placeholders are not centering in the input field or outline.

Here is my component code:

import React, {useState, useContext} from 'react'
import { GlobalContext } from '../context/GlobalState';

// UI for Text Field
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles(theme => ({
        root: {
          '& .MuiTextField-root': {
          margin: theme.spacing(1),
          width: 320,
        },
    },
}));

export const AddTransaction = () => {
  const classes = useStyles();

  const [text, setText] = useState('');
  const [amount, setAmount] = useState();

  const { addTransaction } = useContext(GlobalContext);

  const onSubmit = e => {
    e.preventDefault();

    const newTransaction = {
      text,
      amount: +amount
    }

    addTransaction(newTransaction);
    }

  return (
    <>
      <h3 align='center'>Add new transaction</h3>
      <form className={classes.root} noValidate autoComplete="off" onSubmit={onSubmit}>
          <TextField
            id="Transaction Name"
            label="Transaction Name"
            variant="outlined"
            size="small"
            type="text"
            margin="dense"
            onChange={(e) => setText(e.target.value)}
            value={text}
            required = {true}
            //placeholder="Transaction Name"
            // InputLabelProps={{
            //   shrink: true, 
            //   style: {fontSize: 12}
            // }}
            // inputProps={{
            //   style: {fontSize: 16} 
            // }}
            // //autoFocus={true}
          />      
          <TextField
            id="Amount"
            label="Amount"
            variant="outlined"
            size="small"
            type="number"
            margin="dense"
            onChange={(e) => setAmount(e.target.value)}
            value={amount}
            required = {true}
            // InputLabelProps={{ 
            //   shrink: true, 
            //   style: {fontSize: 16}
            // }}
            // inputProps={{
            //   style: {fontSize: 12} 
            // }}
            // margin="normal"
            // autoFocus={true}
          />  
          </form>     
        <div>
        <button className="btn">Add transaction</button>
        </div>
    </>
  )
}