Snackbar not opening after Mutation

问题

I want that a snackbar opens up in case the mutation is not completely successful. In this case, handleOpen() is called. For When I hit the button, the mutation takes place and my page crashes. I get an error that

TypeError: undefined is not an object (evaluating 'children.props.style')

When I remove the setStatus from my handleOpen function, the page doesn't crash. Oops is printed.

For Snackbar, I am using ``open={status}```

Here's my remaining code:

export default function RemoveUserPage() {
  const [state, setState] = useState({
    email: '',
  });  
  const [status, setStatus] = useState(false);
  // onCompleted= {(e: any) => setStatus(true)}

  function submitForm(RemoveUserMutation: any) {
    const { email} = state;
    if(email){
      RemoveUserMutation({
        variables: {
            email: email,
        },
    }).then(({ data }: any) => {
      console.log('info: ', data.deleteUser);
    })
    .catch(console.log)
    }
  }
//In my case, the mutation is unsucessful so handleOpen()is called
  const handleOpen = () => {console.log('Oops');setStatus(true)}
  return (
    <React.Fragment>
    <Mutation mutation={RemoveUserMutation}
    onError={(err: any) => {
      handleOpen()
    }}
    >
      {(RemoveUserMutation: any) => (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <Formik
        initialValues={{ email: '' }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
        validationSchema={schema}
      >
        {props => {
          const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched
          } = props;
          const change = (name: string, e: any) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);
            setState( prevState  => ({ ...prevState,   [name]: e.target.value }));  
          };
          return (
            <div className='main-content'>
              <form style={{ width: '100%' }}
               onSubmit={e => {e.preventDefault();
                submitForm(RemoveUserMutation)}}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ""}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, "email")}
                  />
                  <br></br>
                  <Button
                  type="submit"
                  disabled={!isValid || !email}
                    style={{
                      background: '#6c74cc',
                      borderRadius: 3,
                      border: 0,
                      color: 'white',
                      height: 48,
                      padding: '0 30px',
                    }}
                  >
                    Remove User</Button>
                </div>
              </form>
            </div>
          )
        }}
      </Formik>
    </div>
      )}
     </Mutation>
     <Snackbar
          open={status}>
          Snackbar contents
        </Snackbar>
        </React.Fragment>
  );
}

来源：https://stackoverflow.com/questions/60508814/snackbar-not-opening-after-mutation