I having a problem when I looking a way to transfer the search icon from left to right because our codebase is using reactsearchautocomplete which is included in npm . here's my copy of my code in our project.
<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>
I try to replace reactsearchautocomplete element to searchIcon element but I noticed that reactsearchautocomplete was used some sort of hooks . if ever i want to transfer searchicon from left to right .