I'm working on a PCF component for Dynamics CRM based on suggestions from an API call. My problem is that i cannot show all the values retrieved from a server. It's seems like "options" is not updated after the first fetch call. Below is the code from my component
import * as React from 'react'import AutoComplete, { AutocompleteInputChangeReason } from '@material-ui/lab/Autocomplete'import TextField from '@material-ui/core/TextField'import { useState } from 'react';export interface IDaDataControllerProps{ onValueChanged: (value?: any) => void; onGetOptionLabel: (value?: any) => string placeholder?: string}export const DaDataAddressComponent : React.FunctionComponent<IDaDataControllerProps> = (props: IDaDataControllerProps) => {const [options, setOptions] = useState([]);return(<AutoComplete id = "combo-box-demo" options = {options} onInputChange = {(e: React.ChangeEvent<{}>, value: string, reason: AutocompleteInputChangeReason) => { fetch('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address', { method: "POST", headers: {'Authorization': 'Token 37bcc555cd055d433a5cb674500f7bc7f05bf474','Content-Type': 'application/json' }, body: "{\"query\":\"" + value +"\"}" }).then((response) => response.json().then((item) => setOptions(item.suggestions))) }} renderInput = {(params) => (<TextField {...params} label= "Write any text"/> )} getOptionLabel = {(option) => props.onGetOptionLabel(option)} onChange = {(event, value) => {props.onValueChanged(value)}} /> )}When i input any text at first time the autocomplete shows all the retrieved suggestions(pic 1). But when i enter a more detalized name the component does not shows the retrieved values (pic 2).
So my question is what i'm doing wrong?