In the typescript react code, when I try to access the fields of an existing object I get undefined

The point is that when I access an entire object of type ProductCardInterface ->

export interface ProductCardInterface {
  image_url: string;
  product_name: string;
  price: number;
}

I get the correct output in the console, but when I try to access the fields of this object, for example here ->

const { image_url, price } = product_data;
...
console.log('product_data:', product_data, 'price:', price, 'image_url:', image_url);

I get undefined ->

product_data: {"image_url":"...","product_name":"table","price":39.99} price: undefined image_url: undefined

Although data is sent and received correctly from the backend, the logs on the backend ->

[2024-01-08T15:51:33Z INFO  back::services::furniture::furniture_get_product_data] ..., table, 39.99
[2024-01-08T15:51:33Z INFO  actix_web::middleware::logger] 127.0.0.1 "GET /furniture/table_get_data HTTP/1.1" 200 698 "http://localhost:5173/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" 0.000857

Component code:

import React, { useEffect, useState } from "react";
import { ProductCardInterface } from "../../interfaces/ProductCardInterface.ts";
import { getProductDataByName } from "../../services/GetProductByName.ts";
import { MyLoader } from "../../utils/Loader/MyLoader.tsx";
import { AddToCart } from "../../services/AddToCart.ts";

export const ProductCard: React.FC<{ name: string }> = ({ name }) => {
  const [product_data, set_product_data] = useState<ProductCardInterface | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    (async () => {
      try {
        set_product_data(await getProductDataByName(name));
      } catch (error: unknown) {
        if (error instanceof Error) {
          console.error(`Error fetching furniture data for ${name}: ${error}`);
          setError(error);
        }
      } finally {
        setLoading(false);
      }
    })();
  }, [name]);

  if (loading) { return <MyLoader />; }

  if (error || !product_data) {
    console.log('Error or no product data:', error, product_data);
    return (
      <div className="error_div">
        <p className="error_definition" id="error_def">
          Internal Server Error: {error ? error.message : "YAR ERROR"}
        </p>
      </div>
    );
  }

  const { image_url, price } = product_data;
  console.log('product_data:', product_data, 'price:', price, 'image_url:', image_url);

  return (
    <div className="product-card">
      <h3 className="product-name">{name}</h3>
      {image_url && <img className="product-image" src={image_url} alt={name} />}
      {price !== undefined && <p className="product-price">Price: ${price}</p>}
      <button
        className="add-to-cart-button"
        id={`add-${name}-to-cart-button`}
        onClick={() => AddToCart(product_data!)}
      >
        Add to Cart
      </button>
    </div>
  );
}

getProductDataByName function:

export const getProductDataByName = async (product_name: string): Promise<ProductCardInterface> => {
  return fetch(`${URL}/furniture/${product_name}_get_data`)
    .then(response => {
      console.log(product_name);
      if (!response.ok) throw new Error(`Failed to fetch data for furnitureId ${product_name}. Status: ${response.status}`);
      return response.json();
    })
    .catch(error => {
      console.error(`Error in getFurnByName: ${error.message}`);
      throw error;
    });
};