Text input không nhập được trong React

Hi everyone! Mình đang học react nhưng có thắc mắc như sau:

Mình đang làm chức năng tìm kiếm username trên github rồi add card vào(kiểu add danh bạ github vào). nhưng khi chạy thì cái text input của mình không nhập được.

Đây là Code:

class Card extends React.Component {
	constructor(props) {
  	super(props);
  }
  
  render() {
  	return(
    	<div>
    	  <img width="75" src={this.props.avatar_url} />
        <div style={{display: "inline-block", marginLeft: 10}}>
          <div class="name">Name: {this.props.name}</div>
          <div class="company">Company: {this.props.company}</div>
        </div>
    	</div>
    );
  }
}

const Cardlist = (props) => {
	return(
  	<div>
  	  {props.cards.map(card => <Card {...card}/>)}
  	</div>
  );
}

class Form extends React.Component {
	state = { userName: "" };
	handleSubmit = (event) => {
  	event.preventDefault();
    console.log("Event: Form submit", this.state.userName);
    axios.get("https://api.github.com/users/${this.state.userName}")
    .then(resp =>
    {
    	this.props.onSubmit(resp.data);
    });
  }
  
	render() {
  	return(
    	<form onSubmit={this.handleSubmit}>
    	  <input 
        	type="text" 
          onChange={(event) => this.setState({username: event.target.value})} 						         		 placeholder="Github username" 
          value={this.state.userName} 
        	required />
        <button type="submit">Add card</button>
    	</form>
    );
  }
}

class App extends React.Component {
	state = {
  	cards: [
      { 
        name: "Aragami1408",
        avatar_url: "https://avatars3.githubusercontent.com/u/25903678?v=4",
        company: "Day Nhau Hoc"
      },
      { 
        name: "Drgnz",
        avatar_url: "https://avatars0.githubusercontent.com/u/12205347?v=4",
        company: "Day Nhau Hoc"
      },
      {
        name: "Huy Nguyen",
        avatar_url: "https://avatars3.githubusercontent.com/u/4599467?v=4",
        company: "Day Nhau Hoc"
      },
      {
        name: "Ho",
        avatar_url: "https://avatars0.githubusercontent.com/u/340262?v=4",
        company: "N/A"
      },
      {
        name: "Xuan-An Phan",
        avatar_url: "https://avatars3.githubusercontent.com/u/13184721?v=4",
        company: "Day Nhau Hoc"
      },
    ]
  }
  
  addNewCard = (cardInfo) => {
  	this.setState(prevState => ({
    	cards: prevState.cards.concat(cardInfo)
    }));
  }
  
	render() {
  	return(
    	<div>
    	  <Form onSubmit={this.addNewCard}/>
        <Cardlist cards={this.state.cards} />
    	</div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

Còn đây là phần kết quả:

P/s: 5 cái card trên chỉ là demo thôi nha