Select ignores onInputChange handler when it returns inputValue as an empty string

I'm attempting to enforce a maximum character count and keep users from entering certain characters.
Here is my Select:

<AsyncCreatableSelect
  isMulti
  isSearchable
  defaultOptions
  cacheOptions
  defaultValue={optionsDefaultValue}
  onChange={value => setUpdatedOptionsList(value)}
  onInputChange={handleOnInputChange}
  theme={theme}
  styles={isSavingOptions ? disabledStyles : styles}
  isDisabled={isSavingOptions}
  components={{ ClearIndicator: null, LoadingIndicator: null }}
/>

and here is the handler in question:

const handleOnInputChange = inputValue =>{
  if(inputValue.length > 3){
     inputValue = inputValue.substring(0, 3);
  }
  else{
     const forbiddenCharacters = /[^a-zA-Z0-9.\-_ ]/g;
     if(inputValue.match(forbiddenCharacters)){
       inputValue = inputValue.replace(forbiddenCharacters, '');
     }
  }
  return inputValue;
}

Typing in :

1. "dog" shows "dog"
2. "dogs" shows "dog"
3. "do#" shows "do"
4. "#" shows "#"
5. "#f" shows "f"
6. "#$" shows "#$"

In scenarios 4 and 6, inputValue is being returned as an empty string. I even had a console log in there at one point to make sure that's what it was doing but, instead of showing that, the Select continues to show the forbidden character (unless the user types an approved character after, in which case it removes the forbidden one as shown in scenario 5) even though the inputValue is empty. I also tried hard coding it to return inputValue as an empty string (also tried null), and it just showed whatever I typed instead of nothing. Any time the handler returns an empty string, the Select seems to just...refuse to acknowledge it.

Thank you!