Need Discussion on Dynamic Routes with shallow option next JS

Page renders every time when we are trying to update or add queryParms in URL with shallow option. sometimes getting error

The provided as value (null) is incompatible with the href value (/search/[country]/[city])

For dynamic routes my folder structure is

Search -> Folder Name
   - [country]
     -  [city].js

when i am trying to update URL on click

  const incrementCounter = () => {
     const currentCounter = query.counter ? parseInt(query.counter) : 0;
    const href = `/search/de/berlin/?counter=${currentCounter + 1}`;
    router.push(pathname, href, { shallow: true });
  };

In my case, on click change state counter my query object in the router not updating with counter params.so, if i will click again then it is not incrementing.

the second case if I will replace pathname with asPath then my URL is updating and query params is updating. Problem is page renders every time on the server.

To Reproduce

Steps to reproduce the behavior:

codesandbox url

1. Page /search/de/berlin
2. Click on change state counter
3. see render page but not updating url
4. See error

Expected behavior

My current url - http://localhost:4000/search/de/berlin want to add new queryParams: ?counter=3&id=98

Should not reload the page on the server. should be all params in router query.

System information

• Version of Next.js: Latest
• Version of Node.js: Latest