NextJS: Push new query string value to an existing asPath or update the existing query string - reactjs

Question

I am kinda lost on how the NextJS router system works:
I have articles by categories that can be:
Medical
Charity
Wedding
Funeral
I am having a navbar where the user can display articles by category, and can also search by a keyword. The category feature is working perfectly.
This is how my navbar looks like:
That means if the user clicks on All, we are displaying all articles:
Here is the scenario:
When we click for example on Medical, the URL looks like this: http://localhost:3000/articles?category=medical
When we click in all, the URL looks like http://localhost:3000/articles
When we click in all and search the keyword COVID, the URL looks like this: http://localhost:3000/articles?search=covid
PROBLEM
I now want to combine categories and search:
If the user clicks in medical and searches for the keyword COVID, the URL must look like this: http://localhost:3000/articles?category=medical&search=covid.
After getting the search result, when the user changes the keyword, I want to replace the search query string with the new value.
HOW I TRIED TO DO?
I know NextJS router object has:
pathname: Current route. That is the path of the page in /pages
and asPath: Actual path (including the query) shown in the browser
const { push, asPath } = useRouter();
const onSearchKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
const keyword = e.currentTarget.value;
if (e.key === "Enter") {
url = !isEmpty(keyword.trim())
? {
pathname: asPath,
query: { search: keyword },
}
: {
pathname,
};
push(url);
}
};
But doing so is encoding the asPath and resulting in this URL: http://localhost:3000/article%3Fcategory=covid&search=covid which is displaying the 404 page not found.
So, I don't even know if I can replace the search with a new value as the user wants to perform a new search.

Answer 1

I solved the issue by not using the asPath: I instead used the pathname alongside the spread operator as follow:
url = !isEmpty(keyword.trim())
? {
pathname,
query: { ...query, search: keyword },
}: {
pathname: page,
};