Hello, when I send the product from Product to ProductDetail with props, when I do console.log(product) in ProductDetail, my data is visible in the <div>{product.name}</div> <div>{product.name}</div> sections. My values ​​are null and nothing appears on the page. How can I fix this problem?

type DetailProps = {
    productId? : string
}

const Product = ({params}: {params: DetailProps}) => {
  const [product,setProduct]=useState<ProductType>();
    const {productId} = params;
   
    const fetchProducts = async () => {
      try {
        const response = await axios.get(`/api/get_product/${productId}`); // API endpoint
        setProduct(response.data?.product || response.data);

        setLoading(false);
      } catch (err) {
        setLoading(false);
      }
    };
    useEffect(() => {
      if (productId) {
        fetchProducts();
      }
    }, [productId]);
    
 return (
    <div>
    {!product ? (
      <div>Loading...</div> // Yükleme durumu
    ) : (
      <ProductDetail key={product._id} product={product} />
    )}
  </div>
  )
}

ProductDetail

const ProductDetail = ({product}:{product:any}) => {
  useEffect(() =>{
    console.log("oneeeproduct",product);
  
  },
  [product])
  
  return (
    <div className='text-4xl text-red-900 bg-green-600'>{product.name}</div>
  )
}

export default ProductDetail