cannot setState in onInputChange fuction in React-select?

I am using React-select Autocomplete search like the below screenshot. but I cannot collect input field value. there is no getting error or something. but I cannot type more than 1 letter after setState.

but only log this input value work log show porperly.

<AutoCompleteSearch
  isLoading={isLoading}
  options={filterOptions || []}
  className='w-full mr-3'
  onChange={(selectOption: any) => {
      handleFilterOptionChange(selectOption)
  }}
  onInputChange={(inputValue: any) => {
      console.log(event) //work properly
      setSelectedKeyWord(inputValue) //after added this not work cannot type and not set state
  }}
/>

in Storybook use component

import React, { FC, useState } from 'react'
import Select, { components } from 'react-select'
import CN from 'classnames'

export interface AutoCompleteSearchProps {
  [x: string]: any
  defaultValue?: { id: any; value: any; label: string | number }
  isClearable?: boolean | true
  isDisabled?: boolean
  isLoading?: boolean | false
  isMultiple?: boolean | false
  isSearchable?: boolean | true
  onChange?: any
  onInputChange?: any
  options: { id: any; value: any; label: string | number }[]
  placeHolder?: string | 'Search'
  value?: { id: any; value: any; label: string | number }
}

export const AutoCompleteSearch: FC<AutoCompleteSearchProps> = ({
  className,
  defaultValue,
  isClearable,
  isLoading,
  isMultiple,
  isSearchable,
  onInputChange,
  onChange,
  options,
  placeHolder,
  value,
  ...restProps
}: AutoCompleteSearchProps) => {
  const AutoCompleteSearchClasses = CN(`auto-complete-search`, className, {})

  const [keyword, setKeyWord] = useState('')

  function ValueContainer({ children, ...props }: any) {
    return (
      components.ValueContainer && (
        <components.ValueContainer {...props}>
          {!!children && (
            <i
              className='ri-search-line ri-lg text-N-500'
              aria-hidden='true'
              style={{ position: 'absolute', left: 14 }}
            />
          )}
          {children}
        </components.ValueContainer>
      )
    )
  }

  const styles = {
    valueContainer: (base: any) => ({
      ...base,
      paddingLeft: 40,
    }),
    control: (base: any) => ({
      ...base,
      'border': '1px solid #CCD6E1',
      'borderRadius': '3px',
      'boxShadow': '0px 1px 2px rgba(0, 45, 71, 0.05)',
      '&:hover': {
        border: '1px solid #CCD6E1',
      },
      '&:focus': {
        border: '1px solid #3570AB',
        boxShadow:
          '0px 0px 4px rgba(0, 89, 141, 0.24), inset 0px 0px 4px rgba(0, 58, 89, 0.5)',
      },
    }),
    menuPortal: (base: any) => ({ ...base, zIndex: 9999 }),
    option: (base: any, { isFocused }: any) => ({
      ...base,
      backgroundColor: isFocused ? '#EEF3F8' : '#fff',
      color: '#2E3849',
    }),
  }

  return (
    <div className={AutoCompleteSearchClasses} {...restProps}>
      <Select
        components={{
          ValueContainer,
          DropdownIndicator: () => null,
          IndicatorSeparator: () => null,
        }}
        defaultValue={defaultValue}
        isClearable={isClearable}
        isSearchable={isSearchable}
        isLoading={isLoading}
        isMulti={isMultiple}
        options={options}
        onChange={onChange}
        onInputChange={onInputChange}
        menuPosition='fixed'
        placeholder={
          <span className='select-placeholder-text text-N-500'>
            {placeHolder}
          </span>
        }
        styles={styles}
        value={value}
      />
    </div>
  )
}

AutoCompleteSearch.defaultProps = {
  defaultValue: undefined,
  isClearable: true,
  isSearchable: true,
  isLoading: false,
  isMultiple: false,
  onChange: () => {},
  onInputChange: () => {},
  options: [],
  placeHolder: 'Search',
  value: undefined,
}

export default AutoCompleteSearch

exactly I want to catch React input type value and set it useState.
anyone can help me or can you guys know another method do this?