Next js router query all data is not coming - node.js

Question

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.