Next js router query all data is not coming

I made a request to my backend and brought all the categories to the homepage. From there I redirected to a page called [category_slug].jsx.

I'm getting data with useEffect and I'm pulling it from the context api

categories.map((category) => (
          <Link
            href={{ pathname: `/categories/${category.category_slug}`, query: category }}
            className="text-sm hover:underline hover:opacity-60"
            key={category.开发者_如何转开发id}
          >
            {category.name}
          </Link>
        ))

Also, I used this method before to make the page with the videos and it worked then.

All data comes to that page, but the videos come with 2 empty strings, but it should not come as such.

{
    "id": "9",
    "name": "test2",
    "category_slug": "test2",
    "description": "testt2",
    "videos": [
        "",
        ""
    ],
    "image": "",
    "created": "2022-12-07T02:07:05.838815Z",
    "updated": "2022-12-07T02:07:05.838840Z"
}

My [id] page:

import React from "react";

const CategoryPage = () => {
    const router = useRouter()
    const category = router.query;

    console.log(category)

  // captilaze first letter and lowercase the rest
  const capitalize = (s) => {
    if (typeof s !== "string") return "";
    return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();

  };
  return (
    <>

    {  /* <CustomHead title={capitalize(category.name)} />*/}
      <div className="my-10 mx-auto flex min-h-screen  px-24   py-10  ">
        <div className="flex w-full flex-col bg-white p-10">
            { /* <h1 className="text-2xl font-bold up capitalize">{category.name}</h1>*/}
          <div className="mt-10 grid grid-cols-1 place-items-center  gap-2 md:grid-cols-3">
          </div>
        </div>
      </div>
    </>
  );
};

export default CategoryPage;

Please excuse me if I didn't express myself very well.