React MUI Autocomplete "options.filter" is not a function

Question

I wish to create a autocomplete search bar with my own custom call to the backend, which searches through a list of tickers.

<Autocomplete
                multiple
                id="checkboxes-tags-demo"
                options={watchlistSearchTickers}
                disableCloseOnSelect
                getOptionLabel={(option: any) => (option!) ? option.Symbol : null}
                renderOption={(props, option, { selected }) => (
                    <li {...props}>
                        {option.Symbol}
                    </li>
                )}
                style={{ padding: 0 }}
                onChange={(event, query: any) => handleWatchlistSearch(query)}
                filterOptions={(x) => x}
                renderInput={(params) => (
                    <div ref={params.InputProps.ref}>
                        <input type="text" {...params.inputProps} />
                    </div>
                )}
            />

The initial render here seems fine, but on click the text input box, an error "options.filter" is not a function occurs. Here is the function that calls the backend through a post request:

const [watchlistSearchTickers, setWatchlistSearchTickers] = useState<Array<watchlistSearchInterface>>([])

function handleWatchlistSearch(query: string) {
        axiosInstance.post("/portfolio/watchlist/search/", {
            query: query
        }).then((res) => {
            console.log(res)
            setWatchlistSearchTickers(res.data)
        })
    }

    useEffect(() => {
        handleWatchlistSearch("")
    }, []) // Initialize with empty list of tickers

Does anyone know why this happens?