Can't write in the Autocomplete component

[Luvous]

I have an API that gets called every time the user type something, so I can suggest some movie titles from the api. I think this works, but I can't type in the input of the Autocomplete component.

Here's my code:

`function Home() {
const [movieNames, setMovieNames] = useState([])

const onChangeHandler = async (text) => {
    const response = await axios.get(
        'https://yts.mx/api/v2/list_movies.json?query_term=' + text
    );

    let arrayOfMoviesNames = [];

    response.data.data.movies.forEach(i => {
        arrayOfMoviesNames.push(i.title)
    });

    setMovieNames(arrayOfMoviesNames);
}
console.log(movieNames)

return (
    <div>
            <Autocomplete
                className='autocomplete'
                placeholder="Search"
                limit={8}
                data={movieNames}
                aria-label="search movie"
                onChange={(e) => onChangeHandler(e.target.value)}
            />
    </div>
)}`

I made a sandbox with the exact issue: https://codesandbox.io/s/flamboyant-vaughan-3zzsm0

[rtivital]

You are using onChange event handler wrong. it should be onChange={(value) => onChangeHandler(value)}
https://mantine.dev/core/autocomplete/#controlled

[Luvous]

Thanks! This work, I had to fix a few things before but this was the main issue.