Категория не подтягивает сообщения категории

Question

Я пытаюсь щелкнуть категорию и открыть готовые сообщения, относящиеся к этой категории, для веб-сайта. Мне нужна категория, чтобы подтянуть блоги, которые уже созданы с помощью hygraph(graphcms), и отобразить их на странице для этой категории. Ошибка, которую я получаю, когда я нажимаю на категорию, пытаясь открыть, какие сообщения находятся в этой категории с веб-сайта. Я не знаю, где я ошибаюсь.

Это ошибка журнала консоли, которую я получаю:

      error - ReferenceError: categories is not defined
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a 
class/function (for composite components) but got: undefined. You likely forgot to export your 
component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at [slug].js:11.
at CategoryPost (webpack-internal:///./pages/category/[slug].js:20:31)
at Layout (webpack-internal:///./components/Layout.jsx:13:19)
at MyApp (webpack-internal:///./pages/_app.js:19:18)
at StyleRegistry (C:\Users\naw01\1\ll\licks_locks\node_modules\styled-jsx\dist\index\index.js:671:34)
at FlushEffectContainer (C:\Users\naw01\1\ll\licks_locks\node_modules\next\dist\server\render.js:424:37)
at AppContainer (C:\Users\naw01\1\ll\licks_locks\node_modules\next\dist\server\render.js:439:29)
at AppContainerWithIsomorphicFiberStructure (C:\Users\naw01\1\ll\licks_locks\node_modules\next\dist\server\render.js:470:57)
at div
at Body (C:\Users\naw01\1\ll\licks_locks\node_modules\next\dist\server\render.js:736:21)
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

index.js

      import { request, gql } from 'graphql-request';
import { GraphQLClient } from 'graphql-request';


const graphQLClient = new GraphQLClient(
 'https://api-us-east-1.graphcms.com/v2/example'
);



export const getCategoryPost = async (slug) => {
const query = gql`
query GetCategoryPost($slug: String!) {
  postsConnection(where: {categories_some: {slug: $slug}}) {
    edges {
      cursor
      node {
        author {
          bio
          name
          id
          photo {
            url
          }
        }
        createdAt
        slug
        title
        excerpt
        featuredImage {
          url
        }
        categories {
          name
          slug
        }
      }
    }
  }
}
`


const result = await graphQLClient.request(query, { slug, categories });

return result.posts;

}

Категории.jsx

      import React, { useState, useEffect } from 'react'
import Link from 'next/link'

import { getCategories } from '../services'

 const Categories = () =>{
 const [categories, setCategories] = useState([]);

  useEffect(() => {
    getCategories().then((newCategories) => {
    setCategories(newCategories);
  });
  }, []);
 return (
    <div className="bg-white shadow-lg rounded-lg p-8 pb-12 mb-8">
    <h3 className="text-xl mb-8 font-semibold border-b pb-4">Categories</h3>
     {categories.map((category, index) => (
      <Link key={index} href={`/category/${category.slug}`}>
         <span className={`cursor-pointer block ${(index === categories.length - 1) ? 'border- 
b-0' : 'border-b'} pb-3 mb-3`}>{category.name}</span>
      </Link>
     ))}
   </div>
 );
};

export default Categories

[слаг].js

      import React from 'react';
import { useRouter } from 'next/router';

import { getCategories, getCategoryPost } from '../../services';
import { PostCard, Categories, Loader } from '../../components';

const CategoryPost = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <Loader />;
  }

  return (
    <div className="container mx-auto px-10 mb-8">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div className="col-span-1 lg:col-span-8">
          {posts.map((post, index) => (
            <PostCard key={index} post={post.node} />
          ))}
        </div>
        <div className="col-span-1 lg:col-span-4">
          <div className="relative lg:sticky top-8">
            <Categories />
          </div>
        </div>
      </div>
    </div>
  );
};
export default CategoryPost;

// Fetch data at build time
export async function getStaticProps({ params }) {
  const post = await getCategoryPost(params.slug);

  return {
    props: { post },
  };
}

// Specify dynamic routes to pre-render pages based on data.
// The HTML is generated at build time and will be reused on each request.
export async function getStaticPaths() {
  const categories = await getCategories();
  return {
    paths: categories.map(({ slug }) => ({ params: { slug } })),
    fallback: true,
  };
}