i have next.js13 component,using router.push to create a url, I want to immediately access the params on the app/quote/page.js to compose message

Question

Here is my ServicesGridComponent() ---> It creates a url: http://localhost:3000/quote_form?id=undefined&service=Gardening --> the service.id is undefined?

'use client';
import { useRouter, useState } from 'next/navigation';
import ServiceCard from './ServiceCard';

const ServicesGrid = ({ servicesArray }) => {
 const router = useRouter();
  const handleServiceCardClick = (service) => {

  router.push({
    pathname: '/quote_form',
    query: { id: service.id, service: service.title, }, // Use "serviceName" instead of "name"
  });
};

On the app/quote-form/page.js--> I am sending a whatsapp message composed from service.name and other form inputs? Currently, I have tried using router from next/navigation. Here in the quoteForm page component-->

'use client'
import React, { useState, useEffect } from 'react';
import { useRouter, useParams } from 'next/navigation';
import WhatsAppButton from '@/components/WhatsAppButton';

const QuoteForm = () => {
 const params = useParams()
 console.log(params)

 const callNumber = '0637715945';
 const router = useRouter();
 const { id, serviceName } = router.query || {};

 const [quoteData, setQuoteData] = useState({
  messageContent: '',
  serviceId: '',
 });

 useEffect(() => {
 if (id) {
  setQuoteData((prevData) => ({
    ...prevData,
    serviceId: id,
    serviceName: service,
  }));
 }
 }, [id, serviceName]);

 const handleInputChange = (event) => {
 const { name, value } = event.target;
 setQuoteData((prevData) => ({
   ...prevData,
   [name]: value,
  }));
 };
 //return()jsx 

I have tried using useRouter.query() || {}, useParams() to access the params! Or the problem lies in the AppRouter()]