about gatsby link issue - reactjs

Question

I created my own blog with gatsby and contentful using template. And I was tring to change subdirctory of my arcticels. article URLs are working now but links in index page is not working.
import React from 'react'
import { Link } from 'gatsby'
import { GatsbyImage } from 'gatsby-plugin-image'
import Container from './container'
import Tags from './tags'
import * as styles from './article-preview.module.css'
const ArticlePreview = ({ posts }) => {
if (!posts) return null
if (!Array.isArray(posts)) return null
return (
<Container>
<ul className={styles.articleList}>
{posts.map((post) => {
return (
<li key={post.slug}>
<Link to={`/${post.category}/${post.slug}`} className={styles.link}>
<GatsbyImage alt="" image={post.heroImage.gatsbyImageData} />
<h2 className={styles.title}>{post.title}</h2>
</Link>
<div
dangerouslySetInnerHTML={{
__html: post.description.childMarkdownRemark.html,
}}
/>
<div className={styles.meta}>
<small className="meta">{post.publishDate}</small>
<Tags tags={post.tags} />
</div>
</li>
)
})}
</ul>
</Container>
)
}
export default ArticlePreview
I changed to <Link to={/${post.category}/${post.slug}} from <Link to={/${post.slug}}. but somehow links are like http://localhost:8000/undefined/(article-slug). It shold be category name as I set up in Comtentful insted of 'undefined'.
do you have any suggestions?
if I use subdir like /blog/, its working. and Link to={/${post.slug}/${post.slug}} also work.