Input focus problem when trying to retrieve data with createAsync

import { createStore } from 'solid-js/store';
import { createAsync, query } from '@solidjs/router';
import { For } from 'solid-js';

type SearchFields = {
  zipCode?: string;
};

const getCities = query(async (zipCode?: string) => {
  if (!zipCode || zipCode.length !== 5) return undefined;
  return [{ name: "test" }];
}, "getCities");

export default function Root() {
  const [searchFields, setSearchFields] = createStore<SearchFields>();
  const citiesByZipCode = createAsync(() => getCities(searchFields.zipCode));

  createEffect(() => console.log("citiesByZipCode", citiesByZipCode()));
  return (
    <form method="post">
      <fieldset>
        <legend>Code postal</legend>
        <input oninput={(event) => setSearchFields({ zipCode: event.target.value })} />
        <For each={citiesByZipCode()}>{(city) => <div>{city.name}</div>}</For>
      </fieldset>
    </form>
  )
}