드롭 다운에서 값 가져 오기 및 반응 입력

모든 입력에서 값을 얻으려고합니다. 입력에서 입력 값을 가져올 수 있지만 선택 태그의 드롭 다운에서는 가져올 수 없습니다.

내가 도대체 ​​뭘 잘못하고있는 겁니까?

class App extends Component {
  constructor(props){
    super(props)

    this.state = {
      contacts
    };
  }

  removeContact(id) {
     const removedID = contact => contact.id !== id;
     const updatedContacts = this.state.contacts.filter(removedID)
     this.setState({contacts: updatedContacts})
  }

   handleSubmit(e){
     e.preventDefault(e)
     const target = e.target;
     console.log(target.email.value)
     console.log(target.gender.value)

   }


  render() {
    return (
      <div className="App">
            <form onSubmit={this.handleSubmit}>
            <div>
              <label>
               First Name:
                 <input type="text" value={this.state.first_name} name="first_name" />
              </label>
            </div>
            <div>
              <label>
               Last Name:
                 <input type="text" value={this.state.last_name} name="last_name" />
              </label>
            </div>
            <div>
              <label>
               Email:
                 <input type="text" value={this.state.email} name="email"/>
              </label>
            </div>
            <div>
              <select value={this.state.gender} onChange={this.handleSubmit}> 
                  <option name="male"> Male</option>
                  <option name="female">Female</option>
              </select>
            </div>
            <input type="submit" value="Submit" />
          </form>