Ошибка «Превышена максимальная глубина обновления» в реакции и реакции-куки

Я реализовал простую форму входа в React с помощью Redux, следуя этому руководству: https://jslancer.com/blog/2017/04/27/a-simple-login-flow-with-react-and-redux/

Все работает, но когда я добавляю куки, я получаю ошибку:

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

а также:

Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Я выполнил некоторую отладку, и если я уберу onChange = {e => this.setState({password: e.target.value})} из входных данных в коде ниже, ошибка исчезнет.

Есть идеи, почему следующий код не работает?

import { connect } from 'react-redux';
import { withCookies } from 'react-cookie'

class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    };
  }

  render() {
    let {username, password} = this.state;
    let { cookies, allCookies, isLoginPending, isLoginSuccess, loginError} = this.props;
    cookies.set('username', 'Ross', { path: '/', secure: true, httpOnly: true});
    console.info(cookies.get('username'));
    return (
      <form name = "loginForm" onSubmit = {this.onSubmit}>
        <div className = "form-group-collection">
          <div className = "form-group">
            <label>Username:</label>
            <input type = "text" name = "username" onChange = {e => this.setState({username: e.target.value})} value = {username}/>
          </div>
          <div className = "form-group">
            <label>Password:</label>
            <input type = "password" name = "password" onChange = {e => this.setState({password: e.target.value})} value = {password}/>
          </div>
        </div>
      </form>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError,
  };
}

export default withCookies(connect(mapStateToProps, null)(LoginForm));```