How to validate autocomplete suggestion for API request

I am using Placekit for the forward geocoding and so far it works good, but I have an issue with the autocomplete. When I click on the suggestion from the autocomplete dropdown, it does not use this choice for the request. Instead it still makes a request for the input I typed in. How could I change this? I created a stackblitz for this purpose. Public API inlcuded. Please use with caution. https://stackblitz.com/edit/vitejs-vite-bovfbecx?file=src%2FApp.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import placekitAutocomplete from '@placekit/autocomplete-js'
import '@placekit/autocomplete-js/dist/placekit-autocomplete.css'
import placekit from '@placekit/client-js'
import { debounce } from 'lodash'

// Reaktive Login-Variablen
const username = ref<string>('')
const password = ref<string>('')
const isLoginDisabled = computed(() => !username.value.trim() || !password.value.trim())

const handleLogin = () => {
  console.log('Login button clicked')
}

// API-Schlüssel sicher aus einer Umgebungsvariablen laden
const API_KEY = import.meta.env.VITE_PLACEKIT_KEY || ''

// Placekit-Instanz mit Länderfilter
const pk = placekit(API_KEY, {
  countries: ['de'],
  maxResults: 3,
})

// Vue-Ref für das Eingabefeld
const searchInput = ref<HTMLInputElement | null>(null)

let charCount = 0 // Counter to track input length

onMounted(() => {
  if (searchInput.value) {
    placekitAutocomplete(API_KEY, { target: searchInput.value })

    // Debounced Input-Handling für bessere Performance
    searchInput.value.addEventListener(
      'input',
      debounce((event) => {
        const target = event.target as HTMLInputElement
        charCount += 1 // Increase counter every keypress

        if (charCount % 3 === 0) {
          // Only search when divisible by 3
          console.log('Searching for:', target.value)
          pk.search(target.value)
            .then((results) => console.log('Results:', results))
            .catch((err) => console.error('Error:', err))
        }
      }, 300),
    ) // 300ms Verzögerung
  }
})
</script>

Okay, I found examples of working autocompletes with the forward geocoder which fills out a form with the city, postal code and address.

import placekitAutocomplete from '@placekit/autocomplete-js';

import 'shared/global.css'; // load tailwindcss
import '@placekit/autocomplete-js/dist/placekit-autocomplete.css';

// instantiate PlaceKit Autocomplete JS
const pka = placekitAutocomplete(import.meta.env.VITE_PLACEKIT_API_KEY, {
  target: '#placekit-input',
});

// inject values when user picks an address
const form = document.querySelector('#form');
pka.on('pick', (value, item) => {
  for (const name of ['city', 'zipcode', 'country']) {
    form.querySelector(`input[name="${name}"]`).value = [].concat(item[name]).join(',');
  }
});

https://github.com/placekit/examples/tree/main/examples/autocomplete-js-address-form