React JSX API hatası nasıl çözülür?

import React, { useState, useEffect } from "react";
import Skeleton from "react-loading-skeleton";
import { Link, useParams } from "react-router-dom";
import { useDispatch } from "react-redux";
import { addCart } from "../redux/action";
import { Footer, Navbar } from "../components";

const Product = () => {
  const { id } = useParams();
  const [product, setProduct] = useState(null);
  const [similarProducts, setSimilarProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedColor, setSelectedColor] = useState(null);

  const dispatch = useDispatch();

  const addProduct = (product) => {
    if (!selectedColor) {
      alert("L3tfen bir renk seçin!");
      return;
    }
    dispatch(
      addCart({
        ...product,
        selectedColor,
        quantity: 1,
        orderAciklama: product.orderAciklama,
      })
    );
  };

  useEffect(() => {
    const getProduct = async () => {
      setLoading(true);
 
      try {
        const response = await fetch("./JSON/orders.json");
        if (!response.ok) {
          throw new Error("API isteği başarısız oldu.");
        }
        const data = await response.json();
        console.log("Fetch edilen veri:", data);
 
        const numericId = Number(id);
        console.log("Numeric ID:", numericId);
 
        const currentProduct = data.find((item) => item.id === numericId);
        if (!currentProduct) {
          console.error("Ürün bulunamadı!");
          setLoading(false);
          return;
        }
 
        setProduct(currentProduct);
 
        const similar = data.filter(
          (item) =>
            item.category === currentProduct.category &&
            item.id !== currentProduct.id
        );
        setSimilarProducts(similar);
      } catch (error) {
        console.error("API'den veri alınırken hata oluştu:", error);
      } finally {
        setLoading(false);
      }
    };
 
    getProduct();
  }, [id]);
 
  const Loading = () => (
    <div className="container my-5 py-2">
      <div className="row">
        <div className="col-md-6 py-3">
          <Skeleton height={400} width={400} />
        </div>
        <div className="col-md-6 py-5">
          <Skeleton height={30} width={250} />
          <Skeleton height={90} />
          <Skeleton height={40} width={70} />
          <Skeleton height={50} width={110} />
          <Skeleton height={120} />
        </div>
      </div>
    </div>
  );

  const renderStars = (rating) => {
    const fullStars = Math.floor(rating);
    const halfStars = rating % 1 >= 0.5 ? 1 : 0;
    const emptyStars = 5 - fullStars - halfStars;

    const stars = [];
    for (let i = 0; i < fullStars; i++) {
      stars.push(<i key={`full-${i}`} className="fa fa-star" style={{ color: "#FFC107" }}></i>);
    }
    if (halfStars) {
      stars.push(<i key="half" className="fa fa-star-half-alt" style={{ color: "#FFC107" }}></i>);
    }
    for (let i = 0; i < emptyStars; i++) {
      stars.push(<i key={`empty-${i}`} className="fa fa-star" style={{ color: "lightgray" }}></i>);
    }
    return stars;
  };

  const ShowProduct = () => (
    <div className="container my-5 py-2">
      <div className="row">
        <div className="col-md-6 col-sm-12 py-3">
          <img className="img-fluid" src={product.image} alt={product.title} width="400px" height="400px" />
        </div>
        <div className="col-md-6 col-sm-12 py-5">
          <h4 className="text-uppercase text-muted">{product.category}</h4>
          <h1 className="display-5 text-dark">{product.title}</h1>
          <p className="lead text-dark">
            {product.rating && renderStars(product.rating.rate)}
            <span style={{ fontSize: "18px", marginLeft: "10px", color: "gray" }}>
              {product.rating ? `${product.rating.rate} / 5` : "No Rating"}
            </span>
          </p>
          <p className="lead text-dark">{product.orderAciklama}</p>
          <h3 className="display-6 my-4 text-dark">{product.price} ₺</h3>

          <div className="my-3">
            <h5>Renk Seçin: (Zorunlu)</h5>
            <div className="d-flex">
              {product.colors?.map((color, index) => {
                const bgColor = {
                  beyaz: "#fffacd",
                  siyah: "#555555",
                  mavi: "#87ceeb",
                  gri: "#b0c4de",
                }[color.toLowerCase()] || "#fff";

                return (
                  <div key={index} className="text-center mx-2">
                    <div
                      style={{
                        width: "40px",
                        height: "40px",
                        backgroundColor: bgColor,
                        border: `2px solid ${selectedColor === color ? "#000" : "#ccc"}`,
                        cursor: "pointer",
                      }}
                      onClick={() => setSelectedColor(color)}
                    ></div>
                    <span style={{ display: "block", marginTop: "5px", fontSize: "12px", color: "gray" }}>
                      {color}
                    </span>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="d-flex justify-content-between align-items-center">
            <button
              className="btn btn-outline-dark"
              onClick={() => addProduct(product)}
              disabled={!selectedColor}
              style={{ flex: 1, marginRight: "10px" }}
            >
              Sepete Ekle
            </button>
            <Link to="/cart" className="btn btn-dark mx-3" style={{ flex: 1 }}>
              Sepete Git
            </Link>
          </div>
        </div>
      </div>

      <div className="container my-5 py-2">
        <h2>Benzer Ürünler</h2>
        <div className="row d-flex flex-wrap">
          {similarProducts.map((item) => (
            <div className="col-md-3 col-sm-4 col-6 mb-4" key={item.id}>
              <div className="card">
                <img className="card-img-top" src={item.image} alt={item.title} />
                <div className="card-body">
                  <h5 className="card-title">{item.title}</h5>
                  <p className="card-text">{item.price} ₺</p>
                  <Link to={`/product/${item.id}`} className="btn btn-primary">
                    Detaylar
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  return (
    <div>
      <Navbar />
      {loading ? <Loading /> : product ? <ShowProduct /> : <div>Ürün bulunamadı!</div>}
      <Footer />
    </div>
  );
};

export default Product;