input pattern='[a-zA-Z]' is not working in React application

That's easy. You:

1. Remove the pattern attribute.
2. Register your onInputChange method for input events instead of change events (onInput={event => this.onInputChange(event.target.value)}).
3. Clean up the received value in the onInputChange before changing the state.

Check my answer in details here:https://stackoverflow.com/a/68052651/13607767

Here it is in brief -

State

const [tagInputVal, setTagInputVal] = useState("");

Input tag

<input id="tag-input" type="text" placeholder="Add a tag" value={tagInputVal} onChange={(e) => onChangeTagInput(e)}></input>

Handler function

function onChangeTagInput(e) {    setTagInputVal(e.target.value.replace(/[^a-zA-Z\d]/ig, ""));}

So you currently have the functionality of narrowing down the options of the <select> as the user types, and now your concern is increasing security by limiting what the user is able to submit as input.

The answer to this concern is that it is not possible to secure input with client-side validation; it must be done with server-side validation.

Client-side security checks can easily be bypassed. The input must be checked when it is received by the server in order to make sure that it is not malicious.