I am using Async component of react-select for inline editing in ag-grid. There is a event available in react-select component which captures the value and action when we do changes. But key down and enter doesn't capture the change event.

Below is the example of async component -

<Async
className = "async-multi-select"
classNamePrefix="react-select"
isMulti
defaultValue={[]}
id={"aync-react-select"}
{...this.props}
placeholder={""}
onFocus = {() => this.handleFocusChange(true)}
onBlur = {() => this.handleFocusChange(false)}
onChange = {(value,action) => this.handleChange(value,action)}
onKeyDown = {(event: any) => this.onKeyDown(event)}
/>

Below are the events -

private handleChange(value: any[], action: ActionMeta): void {
  if (this.props.onChange){
    this.props.onChange(value,action)
  }
  this.setState({hasSelection: value.length > 0});
}

private handleFocusChange(hasFocus: boolean){
  this.setState({hasFocus});
}


onKeyDown = (event: any) => {
  if (event.key === 'Enter' || event.key === 'Tab'){
    //Not sure what to do here
  }
}

I have tried using onInputChange event as well but that gives a string as input. I want any[] as input and hence I am using onChange event. Any thoughts how can I handle this event with enter and tab key ?