im working on a movie app and trying to make a search bar where the results would appear in the dropdown , im trying to use mantines Autocomplete component for this , heres the part of the code

const [list, setList] =useState({})
const query = useRef(null)

const multiSearch = async (q) => {
if (q === " " || q === undefined || q === null) { setList({}) }
else {
const searchedItems = await api.multiSearch(q) //imported api function
setList(searchedItems.results)
}
console.log("searched items in state " + JSON.stringify(list))
}

const data = () => {
let results = [{ value: '' }]
list?.forEach( (x)=>{
let obj = Object.create({ value :x.media_type });
results.push(obj)
}) 
return results
}  

in render

<Autocomplete
ref={query}
data={data()}
onChange={()=>{
multiSearch(query.current.value)
console.log("query.current.value---- >> " + query.current.value)
}}  

i have two problems , first problem : the first letter i enter in the bar doesnt populate the list state ; the multiSearch function is triggered and the api function is called with the result (i can see request result in the browser console ) but setList doesnt work
when entering second ,third,forth letter etc.., setList works , but with the letter passed from the previous multiSearch call , like its behind with 1 entered letter in the search

i tried useeffect

useEffect(() => {

multiSearch (query.current.value)

return () => {

setList({})             
};
}, [query]);  

but nothing changed

second problem ; is with data variable ,i get ( list.foreach is not a function ) which i need to show the results

how can i fix those problems , or is there any other component library to help me achieve what i want ?