I have a data inside an object in my page. I want to redirect from that page to another page along with the data like the code below

const redirectAppointmentStep1 = (value) => {

    router.push({

      pathname: '/Appointment/bookingstep1',

      query: {value : value},

    })

  }

and I received that data in bookingstep1 page like this

 const {query} = useRouter()

but the problem is the query appear on the url and the url does not look clean. How can I send the data from one page to another page but without appearing it on the url?

I am new in Next.js so any help will be highly appreciated.