I have nextjs / react app in which I am using next router to add some queries to my URL. The chrome dev console gives me alot of warnings using this function:

  const putTargetsToQueryParams = (targets: IFragranceNote[]) => {
    const data = targets.map(t => encodeURI(t.name)).join(',')
    router.query.fragranceNote = data
    router.push({ ...router, query: data }, undefined, { shallow: true })
  }

This works so far but the chrome dev console throws alot of warnings which look similiar to this:

react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: route
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: asPath
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: components
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: isFallback
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: basePath
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: locale
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: locales
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: defaultLocale
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: isReady
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: isPreview
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: isLocaleDomain
react_devtools_backend.js:2540 Unknown key passed via urlObject into url.format: domainLocales

I also tried following approach which leads to the same warnings:

  const putTargetsToQueryParams = (targets: IFragranceNote[]) => {
    const data = targets.map(t => encodeURI(t.name)).join(',')
    router.push({ ...router, query: { ...router.query, fragranceNote: data } }, undefined, { shallow: true })
  }

The function works, I properly add queries, but I would like to understand why all these warnings occur.