You should try storing it in a var first and then fast would be better.

Ohh wait wait!

My bad, i didn't saw your requirement properly.

I have stored the values in the variable, My concern is in Next 13 (i.e router from 'next/navigation") the way we pass an object to router.push has changed, refer to the image I attached above. Trying to figure that out!
I have attached the snippet of code where it needs a fix.

Yea, sorry, let me check.

you'll have to use a combination of useRouter, usePathname and useSearchParams

import {usePathname, useRouter, useSearchParams} from 'next/navigation';

const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();

const search = () => {
    const url = new URLSearchParams(Array.from(searchParams.entries()));

    if (newSearchQuery.length > 0) {
      url.set('location', searchValue);
      url.set('startDate', startDate.toString());
      url.set('endDate', endDate.toString());
    }

    const query = url.toString().length > 0 ? `?${url.toString()}` : '';

    router.push(`/search${query}`);
  };

Hi thanks for reply,
I understood the approach, although I have few doubts

1. "newSearchQuery" variable hasn't been declared in (if Satement).

2. url.set vs URLSearchParams.append() both can be used set URL string ?"

In my case I am trying to perform a search wherein I want the searchParams (i.e location,startDate etc) injected in url upon router.push('/search') to resultPage.

my bad.

1. the newSearchQuery is an argument on the search function.

i'm sure you probably have a handleSearch fn which will be sth like this:

const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newSearchQuery = event.target.value;
    search(newSearchQuery);
  };

2. pretty much the same thing, yeah.

that's exactly how it'll work. try it

then pass the handleSearchChange to your input's onChange event

Wait, this "search" function itself is the so called "handle search" function. How can I directly do it? Make sure its length > 0 isn't necessary. Because the params will already are being set using 'useState'' setState....

import {usePathname, useRouter, useSearchParams} from 'next/navigation';

const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();

const search = () => {
    const url = new URLSearchParams(Array.from(searchParams.entries()));

    if (newSearchQuery.length > 0) {
      url.set('location', searchValue);
      url.set('startDate', startDate.toString());
      url.set('endDate', endDate.toString());
    }

    const query = url.toString().length > 0 ? `?${url.toString()}` : '';

    router.push(`/search${query}`);
  };

Will this work?
Can't I append these three variable directly?

url = URLSearchParams.append(x,y,z) then pass it to router.push?

@Dayo Thanks man for help!

Solved it !

const search = () =>{
    const url = new   URLSearchParams(Array.from(searchParams.entries()));

    if (searchValue) {
      url.set("location", searchValue);
    }

    if (startDate) {
      url.set("startDate", startDate.toString());
    }

    if (endDate) {
      url.set("endDate", endDate.toString());
    }

    const query = url.toString().length > 0 ? `?${url.toString()}` : "";

    router.push(`/search${query}`);
  };

awesome!