How to use autocomplete with react hook useState

[IgnisMX]

Hi, I try to use most simple autocomplete dropdown component using react hook, but when i clicked dropdown the componet no display data.
Here is my code.

Code: Select all

import React, { useState } from 'react';

import { filterByProp } from '../../services';
//Components
import { Panel } from 'primereact/panel';
import { Dropdown } from 'primereact/dropdown';
import { InputText } from 'primereact/inputtext';
import { InputSwitch } from 'primereact/inputswitch';
import { AutoComplete } from 'primereact/autocomplete';
import { InputTextarea } from 'primereact/inputtextarea';

const ItemForm = props => {

    const itemDefault =  {name:"United States",code:"USA"};
    const [item, setItem]  = useState(itemDefault);
    const items = [{name:"Mexico",code:"MXN"},
    {name:"Canada",code:"CAN"}];

    const suggestions = (event) => {
        return items;
    }

    const onChange = (event) => {
        console.log('---------',event);
        setItem({name:"Mexico",code:"MXN"});
    }
    return (
        <div>
            <AutoComplete placeholder="New" dropdown={true} 
            field='name' 
            value={item} 
            suggestions={items} 
            completeMethod={suggestions} 
            onChange={onChange}/>
        </div>
    );
}

export default ItemForm;

I have not found an example of primereact with react hooks.