Svelte 5 with Tanstack query reactivity issue

store.svelte.ts

import { createQueries } from '@tanstack/svelte-query'
import { SvelteDate } from 'svelte/reactivity'

export class StoreX {
  states = $state<Record<string, 'connected' | 'disconnected'>>({})

  connectedItems = $derived.by(() => {
    return Object.keys(this.states).filter((key) => this.states[key] === 'connected')
  })

  disconnectedItems = $derived.by(() => {
    return Object.keys(this.states).filter((key) => this.states[key] !== 'connected')
  })

  results = $state<string[]>([])

  stateQueries = createQueries(() => {
    console.log('creating state queries for:', this.disconnectedItems)
    return {
      queries: this.disconnectedItems.map((key) => {
        return {
          queryKey: ['connect', key],
          queryFn: async () => {
            console.log('connecting to', key)
            await new Promise((resolve) => setTimeout(resolve, 1000))
            return 'connected'
          },
          refetchInterval: 2000
        }
      })
    }
  })

  resultQueries = createQueries(() => {
    console.log('creating result queries for:', this.connectedItems)
    return {
      queries: this.connectedItems.map((key) => {
        return {
          queryKey: ['fetch-result', key],
          queryFn: async () => {
            console.log('fetching result for', key)
            await new Promise((resolve) => setTimeout(resolve, 1000))
            const result = `Result for ${key} at ${new SvelteDate().toLocaleTimeString()}`
            return result
          },
          refetchInterval: 2000
        }
      })
    }
  })

  constructor() {
    $effect(() => {
      this.stateQueries.forEach((query, idx) => {
        console.log('test query', query.data)
        if (query.data === 'connected') {
          const key = this.disconnectedItems[idx]
          this.states[key] = 'connected'
          console.log('connected to', key)
        }
      })
    })

    // despite queries being executed this effect will only run once on start, why?
    $effect(() => {
      console.log('results effect')
      this.resultQueries.forEach((query) => {
        console.log('result query data', query.data)
        if (query.data) {
          const result = query.data
          if (!this.results.includes(result)) {
            this.results.push(result)
            console.log('fetched result:', result)
          }
        }
      })
    })
  }
}