Tengo un problema cuando busco una forma de transferir el ícono de búsqueda de izquierda a derecha porque nuestra base de código usa reactsearchautocomplete que se incluye en npm. aquí está mi copia de mi código en nuestro proyecto.

 <label htmlFor="search" className="block text-sm font-medium text-gray-700"> Search </label> <div className="w-96"> <ReactSearchAutocomplete items={groupNames} onSearch={handleOnSearch} inputDebounce={1000} onSelect={handleOnSelect} onClear={handleOnClear} autoFocus formatResult={formatResult} styling={{ border: "1px solid gray", borderRadius: "7px", backgroundColor: "white", boxShadow: "none", hoverBackgroundColor: "lightgray", color: "gray-700", fontFamily: "Arial", iconColor: "gray", lineColor: "lightgray", placeholderColor: "gray", clearIconMargin: "3px 8px 0 0", zIndex: 2, }}placeholder="Search by Company Group Name or Items" /> </div>

Intento reemplazar el elemento reactsearchautocomplete por el elemento searchIcon, pero noté que reactsearchautocomplete se usó algún tipo de gancho. si alguna vez quiero transferir searchicon de izquierda a derecha.