Problem with react query and nextjs query params

import { OptionalParams, Pagination } from '@/types/commonTypes'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react'

const usePagination = (otherParams: OptionalParams = {}) => {
  const searchParams = useSearchParams()
  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)
    Object.entries(query).forEach(([key, value]) => {
      if (value !== undefined && value !== '') {
        newParams.set(key, value !== null ? value.toString() : '')
      }
    })
    router.push(`?${newParams.toString()}`)
  }, [query, currentPathname, router, searchParams])

  return {
    query,
    setQuery,
  }
}

export default usePagination

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

const { query, setQuery } = usePagination()

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