Autocomplete click event

Hi, i use algolia autocomplete for my search, it works and now i confused to handle click event whenever user click the suggestions. My code as below, i have tried using .on(‘autocomplete:selected’) but it seems does not work. Can somebody help me? Thanks

let searchClient = algoliasearch('xxxxx','xxxxxxxxxxxxxxxxxxx')
        onMounted(() => {
            autocomplete({
                container: '#autocomplete',
                openOnFocus: true,
                stallThreshold: 1500,
                placeholder: 'Cari kursus...',
                getSources({ query }){
                    return [
                        {
                            sourceId: 'products',
                            getItems(){
                                return getAlgoliaResults({
                                    searchClient,
                                    queries: [
                                        {
                                            indexName: 'dev_Skillbaru',
                                            query,
                                            params: {
                                                hitsPerPage: 5,
                                                attributesToSnippet: ['title:25', 'category:15'],
                                                snippetEllipsisText: '...',
                                            }
                                        }
                                    ]
                                })
                            },
                            templates: {
                                item( { item, components }){
                                    return (
                                        <div className="aa-ItemWrapper">
                                            <div className="aa-ItemContent">
                                                <div className="aa-ItemIcon">
                                                    <img 
                                                        src={item.image} 
                                                        alt={"Gambar "+item.title}
                                                        width="40"
                                                        height="40"
                                                        style="object-fit: fill"
                                                    /> 
                                                </div>
                                                <div className="aa-ItemContentBody">
                                                    <div className="aa-ItemContentTitle">
                                                        <components.Snippet hit={item} attribute="title" />
                                                    </div>
                                                    <div className="aa-ItemContentDescription">
                                                        <components.Snippet hit={item} attribute="category" />
                                                    </div>
                                                    <div className="aa-ItemContentDescription">
                                                        <components.Snippet hit={item} attribute="shortDescription" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                }
                            }
                        }
                    ]
                },
                renderer: {
                    createElement: h,
                    Fragment,
                },
                render({ children }, root){
                    render(children, root)
                }
            }).on('autocomplete:selected', (event, suggestion, dataset) => {
                console.log('Isi ', suggestion, dataset); // this is not work
            })
        })