//types/types.ts

export interface Component {
 id: string;
 category: Category;
 tag: Tag;
 name: string;
 desc: string;
 image: Image;
}


export interface Image {
 id: string;
 url: string;
}

export interface Category {
 slug: string;
 title: string;
}

export interface Tag {
 slug: string;
 title: string;
}

//Filter/filter.tsx

"use client";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Category, Tag } from "@/types/types";
import { useSearchParams, useRouter } from "next/navigation";
import qs from "query-string";
import React from "react";

interface Props {
 data: (Category | Tag)[];
 name: string;
 valueKey: string;
}

const Filter = ({ data, name, valueKey }: Props) => {
 const searchParams = useSearchParams();
 const router = useRouter();

 const selectedValue = searchParams.get(valueKey);
 const onClick = (slug: string) => {
 const current = qs.parse(searchParams.toString());

 const query = {
   ...current,
   [valueKey]: slug,
 };

 if (current[valueKey] === slug) {
   query[valueKey] = null;
 }

 const url = qs.stringifyUrl(
   {
     url: window.location.href,
     query,
   }, 
   { skipNull: true }
 );
 router.push(url);
};
return (
 <div className="mb-8">
   <h3 className="text-lg font-semibold">{name}</h3>
   <hr className="my-4" />
   <div className="flex flex-wrap gap-2">
     {data.map((filter: any) => (
       <div key={filter.slug} className="flex items-center">
         <Button
           size="sm"
           className={cn(
             "rounded-md text-sm text-gray-800 bg-white border border-gray-300 shadow- 
 none",
             selectedValue === filter.slug && "bg-black text-white"
           )}
            onClick={() => onClick(filter.slug)}
          >
            {filter.title}
          </Button>
        </div>
      ))}
    </div>
  </div>
 );
};

export default Filter;

//app/(showcase)/components/page.tsx

export const revalidate = 0;

import Filter from "@/components/elements/Filter/filter";
import { getComponentCategory, getTag } from "@/sanity/queries/page";
import React from "react";

type Props = {
 params: {
 componentId: string;
};
 searchParams: {
  category: string;
  tag: string;
 };
};

const ComponentPage = async ({ params, searchParams }: Props) => {
const categories = await getComponentCategory();
const tags = await getTag();
 return (
  <div className="px-4 sm:px-6 lg:px-8 pb-24">
    <div className="lg:grid lg:grid-cols-5 lg:gap-x-8">
      <div className="hidden lg:block">
        <Filter valueKey="category" name="Categories" data={categories} />
        <Filter valueKey="tag" name="Tags" data={tags} />
      </div>
    </div>
  </div>
 );
};

export default ComponentPage;

I am building a Nextjs app using Sanity.io as my backend, and I came across this issue when trying to filter through my items. The fetching from Sanity is well done and the items are being displayed as they should. The issue is when I try to filter through the item by category and by tag, the “slug” that should be displayed on the URL for the selected element does not appear. So the URL looks like “localhost:3000/components?category=[object Object]”, but I think it should be “localhost:3000/components?category=slug“, and the same goes for the tag. This problem causes the selectedValue to not match with the filter.slug, hence the onClick does not change the styling of the element selected.
Your help will be welcome and appreciated. Thanks in advance.