So im trying to make a search bar that redirects to ?q=(search value) and i have implemented it on the page itself, but whenever i use router.push it always goes to correct page initially as i see it in console, but then it goes back to /? with no params, i made it print the same string its redirecting to and pasting it manually and that works fine... Here is page code:

export default async function Home({ searchParams }: Props) {
  console.log(searchParams);
return (
    <main><div>{searchParams.q}</div></main>
  )
}

(This is for testing) And here is the search code but i doubt its the issue (ill be adding more params)

const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
    const params = new URLSearchParams(queryParams);
    params.set("q", searchQuery)
    const route = "?" + params.toString();
    console.log("Pushing to " + route);
    router.push(route.toString());
  };

Here is console output, there is an error but i dont know what it means:

Pushing to ?q=dsa
 Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to fetch: [...]
Navigated to http://localhost:3000/?

The navigated part is chrome feature, not my code
Here is the server output if i type something random:

 ✓ Ready in 4.1s
 ✓ Compiled /page in 2.1s (449 modules)
{}
 ✓ Compiled in 244ms (220 modules)
{ q: 'fsdgh' }

Just a bit confused, it tried following tutorials with similar goals but they get the same result, so i kept the one i could understand the best