Request not being cached

import axios from 'axios'
import { useQuery } from '@tanstack/react-query'
import { City, Country, Region } from '../types/countries-cities'

type CountriesAndCities = {
  countries: Country[]
  cities: City[]
  regions: Region[]
}

async function fetchCitiesAndCountries() {
  const [countries, states, cities] = await Promise.all([
    axios.get('/data/countries.json'),
    axios.get('/data/regions.json'),
    axios.get('/data/cities.json')
  ])

  const statesWithCities = states.data.filter((state: Region) =>
    cities.data.some((city: City) => city.state_id === state.id)
  )

  const countriesWithStates = countries.data.filter((country: Country) =>
    statesWithCities.some((state: Region) => state.country_id === country.id)
  )

  const sortedCities = cities.data.sort((a: City, b: City) => {
    const cityA = a.name
    const cityB = b.name
    return cityA <= cityB ? -1 : 1
  })

  const sortedRegions = statesWithCities.sort((a: Region, b: Region) => {
    const stateA = a.name
    const stateB = b.name
    return stateA <= stateB ? -1 : 1
  })

  const sortedCountries = countriesWithStates.sort((a: Country, b: Country) => {
    const countryA = a.name
    const countryB = b.name
    return countryA <= countryB ? -1 : 1
  })

  return {
    cities: sortedCities,
    regions: sortedRegions,
    countries: sortedCountries
  }
}

export function useCountriesAndCities() {
  const { data, isLoading } = useQuery<CountriesAndCities>(
    ['countriesAndCities'],
    fetchCitiesAndCountries,
    {
      initialData: {
        cities: [],
        regions: [],
        countries: []
      }
    }
  )

  return {
    cities: data.cities,
    regions: data.regions,
    countries: data.countries,
    loading: isLoading
  }
}