Estoy usando el campo de texto material ui para buscar una consulta y mostrar la lista de elementos a continuación. Mi problema es que cuando tengo una pantalla pequeña (vista móvil), tengo la misma funcionalidad que la web y quiero cambiarla.

Por ejemplo, no quiero "hacer clic" en el texto de consulta para continuar, pero quiero "hacer clic" en el icono de búsqueda del teclado móvil y realizar la búsqueda como se muestra en la imagen a continuación.

Componente de campo de texto

 <TextField autoFocus placeholder="Start typing to search" fullWidth id="fullWidth" value={query} onChange={(e) => setQuery(e.target.value)} InputProps={{ startAdornment: ( <InputAdornment position="start"> <SearchIcon /> </InputAdornment> ), }} />