React:: input keyboard works on desktop but not on mobile

I have a hidden input in my react app. My goal was for the input to become active on-screen click regardless of where the click is and the user can enter anything and have the app respond accordingly. Works fine on the desktop. On mobile, pressing anything on the keyboard does nothing, however. Any solution for this?

here is my input:

                <input
                    type="text"
                    autoFocus={true}
                    onBlur={({ target }) => target.focus()}
                    className="input"
                    value={userInput}
                    onChange={handleOnChange}
                    name="input-user"
                />

EDIT: it actually does work on mobile but not as expected. I have my input styled to be transparent. On mobile, I can click where that input is located and have it begin working fine. Any way to recreate the same functionality on the desktop however where I can click anywhere on the page to focus the input?