Data not rendering in Mantine’s Select Component

The cities data is coming from an Api cityOptions is being logged to
the console, but
when I try to show it in the UI in a dropdown, no data shows.

const cityOptions = cities?.map((city) => ({
    value: city.id.toString(),
    label: city.name,
  })) || [];
  console.log("cityoptions", cityOptions)

<Select
  name="city"
  placeholder="Cities"
  value={city || null}
  maw={200}
  size="md"
  data={isLoading ? []: cityOptions}
  disabled={isLoading}
  onChange={(value) => setCity(value as string)}
  icon={<IconSelector size={18} stroke={1.75} />}
  clearable
  style={{ marginBottom: 0 }}
/>