Margin not working in TextField using MUI makeStyles

I am trying to add margin to my TextField component by making an object of makestyles using MUI v5. The background color is reflecting in the component but not margin and padding. Here is my code

import React, { useState } from 'react'
import { Typography } from '@mui/material'
import { Button } from '@mui/material'
import { ButtonGroup } from '@mui/material'
import { Container } from '@mui/material'
import { makeStyles } from '@mui/styles';
import TextField from '@mui/material/TextField';

Here I have used makeStyles

const useStyles = makeStyles({
  field: {
    // paddingTop: '20px',
    padding: '100px',
    backgroundColor: 'red',
    marginBottom: '100px',
    // margin: 100
    // display: 'block'
  },
});

export default function Create() {
  const classes = useStyles()
return (
    <Container>


      <Typography
        variant="h6"
        component="h2"
        gutterBottom
        color="textSecondary"
      >
        Create a New Note
      </Typography>

      <form noValidate autoComplete="off" >
        <TextField
          
          className={classes.field}
          label="Note Title"
          variant="outlined"
          color="secondary"
          fullWidth
          required
          error={titleError}
        >
        </TextField>
        <Button
          type="submit"
          color="secondary"

          variant="outlined"
          onClick={() => console.log("you clicked me")}

          endIcon={<KeyboardArrowRightOutlinedIcon />}

        >Submit </Button>
      </form>

  </Container>
  )
}

All of this is in a single file

Here is the screenshot.