NextJs query params not getting the right value when dynamically changed

i have page with default query params '?status=default'

i am trying to get the value status dan dynamically change it with button trigger

when the page is load for the first time it does get the right value which is 'default'

but when i change the status with onClick button the URL behave like i wanted but the value does not change

here is my snippet

import React, { useEffect } from 'react'
import { GetServerSidePropsContext } from 'next'
import { useRouter } from 'next/router'

const TestURL = (props: any) => {
  const router = useRouter()
  const { query } = router

  function handleChangeQueryParams(status: string) {
    router.replace(router.asPath, { query: { status } })
  }

  console.count('rerender')
  console.log(query.status)

  return (
    <div className="flex flex-col gap-4">
      Index
      <button>{query.status}</button>
      <button
        onClick={() => handleChangeQueryParams('Test1')}
        className="border"
      >
        change query params
      </button>
      <button
        onClick={() => handleChangeQueryParams('Test2')}
        className="border"
      >
        change query params2
      </button>
    </div>
  )
}

been trying to use useEffect and useState but it doesnt seems to work well, what am i missing here

  const [status, setStatus] = useState(query.status)
  useEffect(() => {
    setStatus(query.status)
  }, [query.status])

after trying different method i just found out that the problem is lies on

router.replace(router.asPath, { query: { status } })

when i changed it to

 router.replace({
  pathname: 'test',
  query: { status },
 })

it works as intended