Можно отрисовывать комментарии, когда берем данные из json?

{
  "imageUrl": "",
  "name": "",
  "count": 0,
  "size": {
    "width": 0,
    "height": 0
  },
  "weight": "",
  "comments": [],
  "description": "",
  "id": "1"
}

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import { Product_Details } from "./Components/Product_Details";
import { All_Products } from "./Components/All_Products";
import { Header } from "./Components/Header";
 
function App() {
  return (
    <Router>
      <Header />
      <div>
        <Route path="/" exact>
          <All_Products />
        </Route>
 
        <Route path="/products/:id">
          <Product_Details />
        </Route>
      </div>
    </Router>
  );
}
 
export default App;

import React from "react";
import { Link } from "react-router-dom";
 
export let Header = () => {
  return (
    <header className="header">
      <Link to="/">Products</Link>
    </header>
  );
};

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
 
export let All_Products = () => {
  let [products, setProducts] = useState([]);
 
  let fetchProducts = async () => {
    let response = await fetch(
      "https://613c5527270b96001798b0af.mockapi.io/api/v1/products"
    );
    let data = await response.json();
    setProducts(data);
  };
 
  useEffect(() => {
    fetchProducts();
  }, []);
 
  return (
    <div className="all_products">
      {products.map((el) => (
        <div key={el.id} className="different_product">
          <img src={el.imageUrl} />
          <Link to={`/products/${el.id}`}>{el.name}</Link>
          <p>{el.description}</p>
        </div>
      ))}
    </div>
  );
};

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
 
export let Product_Details = () => {
  let [differentProduct, setDifferentProduct] = React.useState({});
 
  let { id } = useParams();
 
  let fetch_Different_Product = async () => {
    let response = await fetch(
      `https://613c5527270b96001798b0af.mockapi.io/api/v1/products/${id}`
    );
    let json = await response.json();
    setDifferentProduct(json);
  };
 
  useEffect(() => {
    fetch_Different_Product();
  }, []);
 
  return (
    <div className="detail_page">
      {differentProduct && (
        <div>
          <h1>{differentProduct.name}</h1>
          <img src={differentProduct.imageUrl} />
          <p>{differentProduct.description}</p>
        </div>
      )}
    </div>
  );
};

comments.push(text)

{el. count && <Link to={`/products/${el.id}`}>{el.name}</Link>}