Оповещение не отображается com ReactJS / Alert não aparece com ReactJS

Question

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

Estou tentando mostrar um Alert quando um usuário preenche um form, mas no usa funcionando, eu criei uma função para reornar esses alertas, функция серьезности и серьезности, предупреждающая о комо-параметрах.

    import React, {useState} from 'react';

export default function SignUp () {
    const [nome, setNome] = useState("");
    const [password, setPassword] = useState("");
    const createUserWithEmailAndPasswordHandler = (event) => {
      event.preventDefault()
        if ( nome === '' || password === '' ) {
           alertMessage('erroCampos')
        } else {
          const obj = { nome: nome , password: password }
          console.log(obj)
          addUser(obj)    
        }
    };

    const addUser = (obj) => {
      database.collection('empresa')
      .add(obj)
      .then(alertMessage('success'))
      .catch(alertMessage('error'))

  }

    const onChangeHandler = event => {
      const { name, value } = event.currentTarget;
      if (name === "nome") {
        setNome(value);
      } else if (name === "password") {
        setPassword(value);
      } 
      // else if (name === "displayName") {
        // setDisplayName(value);
      // }
    };

    const useStyles = makeStyles((theme) => ({
      root: {
        display: 'flex',
        flexWrap: 'wrap',
      },
      textField: {
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
        width: '35ch',
      }, alert: {
        width: '100%',
        '& > * + *': {
          marginTop: theme.spacing(2),
        },
      }
    }));

    const classes = useStyles();

    const alertMessage = (severity) => {
      console.log(severity)
        if (severity === 'erroCampos') {
          return (
              <div className={classes.alert}>
                <Snackbar open={true} autoHideDuration={2000} >
                  <Alert severity="error">
                    Preencher todos os campos
                  </Alert>
               </Snackbar>
              </div>
          );
        } else if (severity === 'error') {
          return (
            <div className={classes.alert}>
              <Snackbar open={true} autoHideDuration={2000} >
                <Alert severity="error">
                  Erro ao cadastrar
                </Alert>
             </Snackbar>
            </div>
        );
        } else if (severity === 'success') {
          return (
            <div className={classes.alert}>
              <Snackbar open={true} autoHideDuration={2000} >
                <Alert severity="success">
                  Cadastro realizado com sucesso
                </Alert>
             </Snackbar>
            </div>
        );
        }
      }

return (
<div id="input">
<form className={classes.textField} noValidate autoComplete="off" onSubmit={createUserWithEmailAndPasswordHandler}>
  <p>Insira o nome da empresa:</p>
  <TextField 
  label="Nome da empresa" 
  variant="filled" 
  fullWidth
  name="nome"
  onChange = {(event) => onChangeHandler(event)} 
  /> <br></br><br></br>

  <p>Insira sua senha:</p>
  <TextField 
  label="Senha" 
  variant="filled" 
  type="password" 
  fullWidth
  name="password"
  onChange = {(event) => onChangeHandler(event)}
  /> <br></br><br></br>

  <div id="buttons">

  <Button variant="contained" color="default" type="submit" fullWidth> 
    Criar conta 
  </Button> <br></br> <br></br>
  <p>Já possui uma conta?</p>  <br></br> <br></br>
    <Button variant="contained" color="default" fullWidth> <Link to="/home"> 
      Faça login </Link>
    </Button> <br></br> <br></br>
  </div>
</form>
</div>
);
}