نمایش نام دسته بندی در صفحه مربوط به محصول

سلام خسته نباشید
من به یه مشکی خوردم میخواستم اسم کتگوری مربوط به هر محصول رو تو صفحش نمایش بدم ولی فقط آیدی کد محصولو نمایش میده

کد صفحه محصولات

import React, {useContext, useState, useEffect} from 'react'
import {useParams, Link} from 'react-router-dom'
import {GlobalState} from '../../../GlobalState'
import ProductItem from '../utils/productItem/ProductItem'

function DetailProduct() {
    const params = useParams()
    const state = useContext(GlobalState)
    const [products] = state.productsAPI.products
    const addCart = state.userAPI.addCart
    const [detailProduct, setDetailProduct] = useState([])

    useEffect(() =>{
        if(params.id){

            products.forEach(product => {
                if(product._id === params.id) setDetailProduct(product)
            })
        }
    },[params.id, products])

    if(detailProduct.length === 0) return null;

    return (
        <>
            <div className="detail">
                <img src={detailProduct.images.url} alt="" />
                <div className="box-detail">
                    <div className="row">
                        <h2>{detailProduct.title}</h2>
                        <h6>#id: {detailProduct.product_id}</h6>
                    </div>
                    <span>$ {detailProduct.price}</span>
                    <p>{detailProduct.description}</p>
                    <p>{detailProduct.content}</p>
                    <p>{detailProduct.category}</p> // inja mikham namayesh bedam name category marbut be in product
                    <p>Sold: {detailProduct.sold}</p>
                    <Link to="/cart" className="cart"
                    onClick={() => addCart(detailProduct)}>
                        Buy Now
                    </Link>
                </div>
            </div>

            <div>
                <h2>Related products</h2>
                <div className="products">
                    {
                        products.map(product => {
                            return product.category === detailProduct.category 
                                ? <ProductItem key={product._id} product={product} /> : null
                        })
                    }
                </div>
            </div>
        </>
    )
}

export default DetailProduct

وقتی به جای

<p>{detailProduct.category}</p>

اینو قرار میدم

<p>{detailProduct.category && detailProduct.category.name}</p>

فیلد مربوط به دسته بندی خالی میشه و هیچی نمایش نمیده
کتگوری های من تو دیتابیس بصورت تایپ ObjectId ذخیره میشه با استرینگ هم تست کردم ولی بازم مشکلم حل نشد

ممنون میشم اگه بتونید کمکم کنید مشکلمو حل کنم❤️❤️