How to use the @webiny/app/hooks/useAutocomplete.useAutocomplete function in @webiny/app

export function TagsMultiAutocomplete(props) {
    const autoComplete = useAutocomplete({
        search: query => query,
        query: SEARCH_TAGS
    });
    return (
        
    );
}

export function PagesAutocomplete(props) {
    const autoComplete = useAutocomplete(LIST_PUBLISHED_PAGES);

    return (
        
            {({ data }) => {
                const value = get(data, "pageBuilder.page.data");
                return (
                    
                );
            }}

export default function RolesAutocomplete(props) {
    const autoComplete = useAutocomplete({
        search: query => ({ query, fields: ["name"] }),
        query: LIST_ROLES
    });
    return ;
}

const LocaleCodesAutoComplete = props => {
    const autoComplete = useAutocomplete(SEARCH_LOCALE_CODES);
    const options = [...autoComplete.options];
    if (props.value && !options.includes(props.value)) {
        options.push(props.value);
    }

    return ;
};

export function CategoriesAutocomplete(props) {
    const autoComplete = useAutocomplete({
        search: query => ({ query, fields: ["name"] }),
        query: LIST_CATEGORIES
    });

    return (
        
            {({ data }) => (
                
            )}
        
    );
}

export default function GroupsAutocomplete(props) {
    const autoComplete = useAutocomplete({
        search: query => ({ query, fields: ["name"] }),
        query: LIST_GROUPS
    });
    return ;
}