How to use asynchronous autocomplete MUI - reactjs

Question

I tried to list search result onTyping on the autocomplete using useSearch hook.
I have two problems here.
loads searchdata to options only after a rerender(does not mutate)
encountered multiple child with same key
enter image description here
only adds searchdata to options after a rerender
enter image description here
Here is the image of the search result after a rerender
enter image description here
SearchAutocomplete.jsx
import * as React from 'react'
import TextField from '#mui/material/TextField'
import Autocomplete from '#mui/material/Autocomplete'
import useSearch from 'data/search/useSearch'
import { useHistory } from 'react-router-dom'
export default function SearchAutocomplete() {
const [open, setOpen] = React.useState(false)
const [options, setOptions] = React.useState([])
const [inputValue, setInputvalue] = React.useState([])
const [loading, setLoading] = React.useState(false)
const { isLoadingInitialData, searchdata } = useSearch(inputValue)
const history = useHistory()
console.log(searchdata, 'searchdata')
console.log(opptions, 'options')
React.useEffect(() => {
if (isLoadingInitialData) {
setLoading(true)
} else {
setOptions([...searchdata?.[0]?.data])
}
}, [loading, inputValue])
React.useEffect(() => {
if (!open) {
setLoading(false)
setOptions([])
}
}, [open])
return (
<Autocomplete
id="asynchronous-demo"
sx={{ width: 300 }}
open={open}
onOpen={() => {
setOpen(true)
}}
onClose={() => {
setOpen(false)
}}
filterOptions={(x) => x}
isOptionEqualToValue={(option, value) => option?.title === value?.title}
getOptionLabel={(option) => (option?.title ? option?.title : '')}
options={options}
loading={loading}
onChange={(event, value) => {
history.push(value?.route)
}}
onInputChange={(event, newInputValue) => {
setLoading(true)
setInputvalue(newInputValue)
}}
renderOption={(props, option) => {
return (
<li {...props} key={option.id}>
{option.title}
</li>
)
}}
renderInput={(params) => (
<TextField
{...params}
label="Search ..."
InputProps={{
...params.InputProps,
endAdornment: <React.Fragment>{params.InputProps.endAdornment}</React.Fragment>
}}
/>
)}
/>
)
}
useSearch.js
export default function useSearch(searchValue) {
let url = urls.search
const search = searchValue || ''
const getKey = (pageIndex) => {
return `${url}?search=${search}`
}
const { data, error, size, setSize, mutate } = useSWRInfinite(getKey, fetcher, {
shouldRetryOnError: false
})
const searchdata = data ? [].concat(...data) : []
const isLoadingInitialData = !data && !error
const isLoadingMore =
isLoadingInitialData || (size > 0 && data && typeof data[size - 1] === 'undefined')
const isEmpty = data?.[0]?.data?.length === 0
return {
isLoadingInitialData,
isLoadingMore,
error,
searchdata,
mutate,
setSize,
size
}
}
I tried to get the search results as options on MUI Autocomplete. Created a state.
const [inputValue, setInputvalue] = React.useState([])
and set the value on onInputChange
onInputChange={(event, newInputValue) => {
setInputvalue(newInputValue)
}}
After getting the value on searchdata
const { isLoadingInitialData, searchdata } = useSearch(inputValue)
only adds data on rerender
React.useEffect(() => {
if (isLoadingInitialData) {
setLoading(true)
} else {
setOptions([...searchdata?.[0]?.data])
}
}, [loading, inputValue])
How do I set searchdata to options without rerendering ?
How do I fix multiple child with same key error ?