Как я могу очистить значения по умолчанию для Material UI FormControl?

Question

Я создал простую форму (логин и пароль), используя FormGroup и FormControl (Material UI), все работает нормально, за исключением того, что форма всегда имеет значение по умолчанию (которое исходит из последнего введенного допустимого значения)

Я создал две ссылки с помощью React.createRef и назначил их свойству ref входов, например ref={loginField}, затем, в useEffect с помощью [], я установил все значения, состояния, поддерживающие поля, и ссылки, например loginField.current.value = '';

Однако это не работает. Кажется, что loginField.current.value = '' ничего не делает.

Это моя форма

        return (
    <Row className="justify-content-center align-items-center h-100">
      <Col md={4}>
        <MainLogo style={{ marginBottom: 30 }} />
        <FormGroup>
          <FormControl className={clsx(classes.margin, classes.textField)}>
            <StyledInput
              id={LOGIN}
              type="text"
              value={values.login}
              disableUnderline={true}
              placeholder="Enter email or RUT"
              ref={loginField}
              onFocus={handleFocus}
              error={fieldsErrors.loginError !== ''}
              onChange={handleChange(LOGIN)}
            />
          </FormControl>
          {fieldsErrors.loginError && <p style={styles.errorStyle}>{fieldsErrors.loginError}</p>}
          <FormControl className={clsx(classes.margin, classes.textField)}>
            <StyledInput
              id={PASSWORD}
              type={showPassword ? 'text' : 'password'}
              value={values.password}
              disableUnderline={true}
              placeholder="Enter password"
              ref={passwordField}
              onChange={handleChange(PASSWORD)}
              onFocus={handleFocus}
              error={fieldsErrors.passwordError !== ''}
              endAdornment={
                <InputAdornment position="end">
                  <IconButton
                    aria-label="toggle password visibility"
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                  >
                    {showPassword ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
              }
            />
          </FormControl>
          {fieldsErrors.passwordError && <p style={styles.errorStyle}>{fieldsErrors.passwordError}</p>}

          <Button
            variant={submitVariant}
            className="mt-4 ml-auto"
            size="lg"
            type="submit"
            onClick={() => handleSubmit(dispatch, values, fieldsErrors, clearFields)}
          >
            Init Session
          </Button>
          <LinkBtn className="ml-auto mt-2" to="/recover_password">
            Recover Passsword
          </LinkBtn>
        </FormGroup>
      </Col>
    </Row>
  );
};

Я заявил

        let loginField = React.createRef();
  let passwordField = React.createRef();

И в useEffect я делаю

        useEffect(() => {
    setValues({ login: '', password: '' });
    setFieldsErrors({ loginError: '', passwordError: '' });
    loginField.current.value = '';
    passwordField.current.value = '';
  }, []);

Однако он не очищает входы.

Что мне здесь не хватает?

заранее спасибо

Рафаэль