First of all, Happy new year!!!

So I have a component that is a searchbar that on edit has the following function call: (useSearchParams is imported from /next-navigation)
const newSearchParams = useSearchParams(); const handleSearch = () => { const newParams = new URLSearchParams(newSearchParams); if (searchQuery) { newParams.set("type", wantQuotes); newParams.set("category", searchCategory); newParams.set("query", searchQuery); toast.success("Fetching params"); } else { toast.success("Deleting params"); newParams.delete("type"); newParams.delete("category"); newParams.delete("query"); } //For the search Page //replace(${pathname}?${newParams.toString()}); //For the main page router.push("/search/" +$${newParams.toString()}) toast.success(newParams.toString()); }

then i have a page on the following route: @app/search/[id] which has the following code.

"use client"; import { useSearchParams } from 'next/navigation' import toast from 'react-hot-toast'; export default function Page () { const searchParams = useSearchParams(); toast.success("This" + searchParams.toString()); const query= searchParams.get('query'); return ( <div> {query ? query : "Nothing here"} </div> ) }

Despite sending the right params on my first component, the useSearchParams of the second returns an empty object.
Is my problem related to the structure of my files or doing something wrong with my code?

Thanks a lot for your help!