Нужна помощь с кодом typescript react

Я сам по себе бэкендер на расте и вообще не пишу фронтенд, короче, сама проблема в том, что когда я получаю объект из бэка (отправляется он корректно и вроде как получается тоже), вывожу его в консоль и все выводится корректно, но потом когда я пытаюсь обратится к полям полученного объекта то получаю undefined, вот пример с этой строчки:

console.log('product_data:', product_data, 'price:', price, 'image_url:', image_url);

вывод:

product_data: {"image_url":"скрыл","product_name":"sofa","price":59.99} price: undefined image_url: undefined

компонент:

import React, { useEffect, useState } from "react";
import { ProductCardInterface } from "../../interfaces/ProductCardInterface.ts";
import { getProductDataByName } from "../../services/GetFurnByName.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) {
    return (
      <div className="error_div">
        <div className="loaderClass">
          <MyLoader />
        </div>
        <p className="error_definition" id="error_def">
          Internal Server Error: {error.message}
        </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>
      <img className="product-image" src={image_url} alt={name} />
      <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>
  );
};

Интерфейс:

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

Функция getProductDataByName:

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