Раскрывается AutoComplete только со второго раза, почему?

Question

[ivankajam]

Помогите пожалуйста разобраться с проблемой!
Использую react, primereact, а именно компонент AutoComplete. Когда я кликаю на него то с первого раза данные не отображаются, но после первого все нормально, как это можно решить?

Есть главный компонент

export function Address() {
    const [selectedCountry, setSelectedCountry] = useState([]);
    return (
        <div>
            <Address
                value={selectedCountry}
                onSelected={(value) => setSelectedCountry(value)}
            />
        </div>
    );
}

Компонент где мы получает данные

type item = {
    onSelected: (value: any) => void,
    value: [] | null
}
export const Country: FC<item> = (props): JSX.Element => {
    const [items, setItems] = useState<any>([]);

    const {onSelected, value} = props;
    const [fetchCountries, {data: countries, isFetching: isFindCountriesFetch}] = useLazyGetListCountriesQuery();
    const search = (event: { query: string }) => {
        let _items;

        fetchCountries({search: event.query.trim()});
        _items = countries?.items?.filter((country) => {
            return country.name.toLowerCase().startsWith(event.query.toLowerCase());
        });

        setItems(_items);

        return;
    }

    const itemTemplate = (item) => {
        return (
            <div className="country-item">
                <div>{item.name}</div>
            </div>
        );
    }

    return (
        <SelectSearch
            value={value}
            title={'Страна'}
            onHandleValueChange={(value: ICountry) => onSelected(value)}
            completeMethod={search}
            suggestions={items}
            itemTemplate={itemTemplate}
        />
    );
}

Сам AutoComplete

type item = {
    value: any,
    title?: string,
    onHandleValueChange: Function
    itemTemplate?: any
    completeMethod: any,
    disabled?: boolean,
    suggestions?: ICountry[] | undefined,
}

export const SelectSearch: FC<item> = (props): JSX.Element => {
    const {
        value,
        title,
        disabled,
        itemTemplate,
        completeMethod,
        suggestions,
        onHandleValueChange,
    } = props;

    const ref = useRef<any>(null);

    return (
        <div>
            <span className="p-float-label p-input-icon-right">
                <AutoComplete
                    ref={ref}
                    onClick={(e) => ref.current?.search(e, "", "dropdown")}
                    disabled={disabled || false}
                    id='righticon'
                    value={value}
                    suggestions={suggestions}
                    completeMethod={completeMethod}
                    field="name"
                    dropdown
                    autoHighlight
                    forceSelection
                    itemTemplate={itemTemplate}
                    onChange={(e) => onHandleValueChange(e.value)}
                    dropdownIcon={'fas fa-angle-down'}
                    aria-label={title} />
                <label htmlFor="righticon">{title}</label>
            </span>
        </div>
    );
}