Next.js 13... Cannot pass down a queryid to the url using next/navigation but get all all the other parameters

Question

I am using next/router to build the url but in the url serviceId?=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, name: service.title },
    });
  };

  return (
    <div className="grid bg-gray-600 grid-cols-2 md:grid-cols-3 gap-4">
      {servicesArray.map((service) => (
        <div key={service.id}>
          <ServiceCard
            imageUrl={service.image}
            title={service.title}
            description={service.description}
            onClick={() => handleServiceCardClick(service)}
          />
        </div>
      ))}
    </div>
  );
};

export default ServicesGrid;

I am expecting the url to contain the serviceId so I can be able to access the other query parameters and pass them on into the quotation form