Hi, I am using react query with a custom hook for pagination but the query is not executed, it is always pending for some reason and it does not make the call, is it because of the line where I push the queries, did it happen to anyone?

const usePagination = (
otherParams
: OptionalParams = {}) => {
  const searchParams = useSearchParams()
  const pathname = usePathname()
  const router = useRouter()

  const defaultParams: Pagination = {
    page: Number(searchParams?.get('page')) || 1,
    limit: Number(searchParams?.get('limit')) || 10,
    search: searchParams?.get('search') || '',
  }

  const [query, setQuery] = useState<Pagination & OptionalParams>({
    ...defaultParams,
    ...
otherParams
,
  })

  useEffect(() => {
    const newParams = new URLSearchParams(searchParams.toString())

    Object.entries(query).forEach(([key,value]) => {   
      if(value !== undefined && value !== '') {
        newParams.set(key, value.toString())
      }
    })
    router.push(`${pathname}?${newParams.toString()}`)
  }, [query, pathname, searchParams])

  
return
 {
    query,
    setQuery,
  }
}

its for this line, if i delete it react query works

router.push(`${pathname}?${newParams.toString()}`)

here im using in the component

const { query, setQuery } = usePagination()

  const { data: milestones, isLoading } = useQuery({
    queryKey: ['getMilestonesByProject', '', query],
    queryFn: () => getMilestonesProject('', query),
  })