Make password character visible when typing each character and hide after few time interval in React

const styles = {
  facebookBtn: {
    backgroundColor: "rgb(51, 89, 157)"
  },
  form: {
    textAlign: "center"
  }
};

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: "",
      password: "",
      passHidden: ""
    };
    this.clocks = {};
  }

  handleOnSubmit = e => {
    e.preventDefault();
    console.log("Submitted!");
  };

  getLastIndexChar = string => {
    return string.slice(string.length - 1);
  };

  hideAllChars = fieldName => {
    const value = this.state[fieldName];
    let password = "";
    if (value.length) {
      password = Array(value.length).join("•") + "•";
    }
    this.setState({ [fieldName]: password });
  };

  setFieldClock = fieldName => {
    clearTimeout(this.clocks[fieldName]);
    this.clocks[fieldName] = setTimeout(
      () => this.hideAllChars(fieldName),
      1000
    );
  };

  getTypingHiddenPassword = value => {
    return Array(value.length).join("•") + this.getLastIndexChar(value);
  };

  handlePasswordChanged = (fieldName, value) => {
    this.setFieldClock(fieldName);
    const password = this.getTypingHiddenPassword(value);
    this.setState({ [fieldName]: password });
  };

  inputChange = ({ target: { name, value } }) => {
    switch (name) {
      case "password":
      case "passHidden":
        this.handlePasswordChanged(name, value);
        break;
      default:
        this.setState({ [name]: value });
        break;
    }
  };

  render() {
    return (
      <form style={styles.form} onSubmit={this.handleOnSubmit}>
        <h4>Welcome Back!</h4>
        <div className="form-group row">
          <input
            className="input"
            name="userName"
            value={this.state.userName}
            onChange={this.inputChange}
            type="text"
            placeholder="Email"
          />
        </div>
        <div className="form-group row">
          <input
            className="input"
            name="password"
            value={this.state.password}
            onChange={this.inputChange}
            type="text"
            placeholder="Password"
          />
        </div>

        <div className="form-group row">
          <input
            className="input"
            name="passHidden"
            value={this.state.passHidden}
            onChange={this.inputChange}
            type="text"
            placeholder="Password"
          />
        </div>
        <div className="form-group row">
          <button className="btn" type="submit">
            Log In
          </button>
        </div>
      </form>
    );
  }
}

class Form extends React.Component {
  render() {
    const { children, title } = this.props;
    return (
      <div className="col-md-6 mx-auto">
        <header>
          <h1>{title}</h1>
        </header>
        {children}
      </div>
    );
  }
}

ReactDOM.render(<Form children={<Login />} />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>