Object not updating component

SelectUser.jsx

// Doesnt work

@inject('store')
@observer
class SelectUser extends Component {
  
  onChange = (value) => {
    this.props.store.user.update(value) 
  }
  
  render() {
    return (
      <Select.Async
        value={this.props.store.user}
        valueKey="id"
        labelKey="email"
        onChange={this.onChange}
        loadOptions={this.fetchUsers}
      /> 
    )
  }
}


// Works!
@inject('store')
@observer
class SelectUser extends Component {
  
  onChange = (value) => {
    this.props.store.user.update(value) 
  }
  
  render() {
    return (
      <div>
        {this.props.store.user.name}
        <Select.Async
          value={this.props.store.user}
          valueKey="id"
          labelKey="email"
          onChange={this.onChange}
          loadOptions={this.fetchUsers}
        /> 
      </div>
    )
  }
}

store.js

class User {
  @observable id = ''
  @observable name = '' 
  @observable email = '' 
 
  @action update(value) {
    this.id = value.id
    this.name = value.name
  }
}


const user = new User()

class Store {
  @observerable user = user 
}