SignUp.tsx

// ...

type State = {
  email: string
  password: string
}

const initialState = {
  email: '',
  password: '',
}

const SignUp: React.FC = () => {
  const classes = useStyles();
  const [state, setState] = useState<State>(initialState)
  
  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const name = e.target.name;
    const value = e.target.value;
    setState(s => ({ ...s, [name]: value }))
  }, [])

  const handleSubmit = useCallback(async (e: SyntheticEvent) => {
    e.preventDefault()

    const { email, password } = state

    try {
      const res = await firebase.auth().createUserWithEmailAndPassword(email, password)
      console.log('res: ', res)
    } catch (e) {
      // error handling
      console.error(e)
    }

  }, [state])

  return (
    // ...
        <form className={classes.form} noValidate autoComplete="off" onSubmit={handleSubmit}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                value={state.email}
                autoComplete="email"
                onChange={handleChange}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                value={state.password}
                autoComplete="current-password"
                onChange={handleChange}
              />
            </Grid>
          </Grid>

          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign Up
          </Button>

          <Grid item xs={12}>
            <div className={classes.or}>or</div>
          </Grid>
        </form>
    // ...
}

export default SignUp