On Change event inside Typeahead is not working

I'm trying to check if the Onchange event inside typeahead is working or not, but apparently, it isn't. Here is the code:

class Search extends Component {
 state = {
      searchName: ''
}

handleNameChange(event) {
    this.setState({searchName: event.target.value})
    console.log('Name Change: ', event.target.value);
}

render() {
    return (
      <div class="form-group">
                    <Typeahead
                        id="basic-example"
                        options={this.state.hcpName}
                        placeholder="Search by Name..."
                        onChange={this.handleNameChange}
                    />
                </div>
)}
 }

What's the problem with this code? When I type in the field, I do not see anything in the console.

I found a way to directly change the state instead of calling a function. Here is how:

class Search extends Component {
state = {
  searchName: ''
}


 render() {
return (
  <div class="form-group">
                <Typeahead
                    id="basic-example"
                    options={this.state.hcpName}
                    placeholder="Search by Name..."
                    onInputChange={(searchName) => this.setState({searchName})}
                />
            </div>
    )}
  }

Basically, I used onInputChange instead of onChange and then changed the state directly inside of typeahead.