Uncaught TypeError: Cannot read properties of undefined (reading 'img') at Basket.jsx:19:1

The application has the function of adding products to the basket. On the product page it is possible to choose the color and size, if they are not selected in the basket, they will not be marked. But if you select at least one of the colors or sizes, then when you go to the cart page, an Uncaught TypeError: Cannot read properties of undefined (reading 'img') error appears. But if you click on the selection more than once when choosing a color or size, then everything is displayed correctly on the basket page. As I understand it, the problem lies in the asynchrony of useState, if not difficult, tell me what can be done in this case, thanks! The application has the function of adding products to the basket. On the product page it is possible to choose the color and size, if they are not selected in the basket, they will not be marked. But if you select at least one of the colors or sizes, then when you go to the cart page, an Uncaught TypeError: Cannot read properties of undefined (reading 'img') error appears. But if you click on the selection more than once when choosing a color or size, then everything is displayed correctly on the basket page. As I understand it, the problem lies in the asynchrony of useState, if not difficult, tell me what can be done in this case, thanks!

ProductPage

import s from "./ProductPage.module.scss";
import { useParams, NavLink } from "react-router-dom";
import { useEffect, useState } from "react";

import Prices from "./prices/Prices";
import ChooeseSize from "./choosesize/ChooeseSize";
import ChooeseColor from "./choosecolor/ChooeseColor";
import RelatedItems from "./relatedItems/RelatedItems";

const ProductPage = ({ buttonHandler, sizef, colorf, clr, sz }) => {
  let { id } = useParams();

  let [fetchedData, updateFetchedData] = useState([]);

  let { name, price, old_price, img, size, color, related_products } =
    fetchedData;

  let api = `[some api]`;

  useEffect(() => {
    (async function () {
     let data = await fetch(api).then((res) => res.json());
      updateFetchedData(data);
    })();
  }, [api]);

  return (
    <div className={s.productpage}>
      <div className={s.name}>{name}</div>

      <div className={s.path}>
        <NavLink to={"/"}>Главная</NavLink> -{" "}
        <NavLink to={"/shop"}>Магазин </NavLink> - <span>{name}</span>
      </div>

  <div className={s.product}>
    <img src={img} alt="" />
    <div className={s.right}>
      <Prices price={price} old_price={old_price} context="page" />
      <ChooeseSize size={size} sizef={sizef} />
      <ChooeseColor color={color} colorf={colorf} />
      <div className={s.buttons}>
        <button
          onClick={(e) =>
            buttonHandler({
              id: id,
              img: img,
              name: name,
              size: sz,
              color: clr,
              price: price,
            })
          }
          className={s.btnopenshop}
        >
          Добавить в корзину
        </button>
      </div>
    </div>
  </div>
  <RelatedItems related_products={related_products} />
</div>
  );
};

export default ProductPage;

Basket

import s from "./Basket.module.scss";
import BasketItem from "./BasketItem/BasketItem";
import { NavLink } from "react-router-dom";

const Basket = ({ basket }) => {
return (
<div className={s.basket}>
  <div className={s.heading}>Корзина</div>
  <div className={s.path}>
    <NavLink to={"/"}>Главная</NavLink> -{" "}
    <NavLink to={"/basket"}>
      <span> Корзина</span>
    </NavLink>
  </div>

  {basket?.map((basket) => (
    <BasketItem
      key={basket.id}
      img={basket.img}
      name={basket.name}
      price={basket.price}
      size={basket.size}
      color={basket.color}
    />
  ))}
  <div className={s.checkoutbtn}>
    <button className={s.checkout}>Оформить заказ</button>
  </div>
</div>
   );
 };

export default Basket;

BasketItem

import s from "./BasketItem.module.scss";
import axios from "axios";
import { useEffect, useState } from "react";

const BasketItem = ({ img, name, price, size, color }) => {
  return (
<div className={s.basketitem}>
  <div className={s.imgandname}>
    <img src={img} />
    <div className={s.name}>{name}</div>
  </div>
  <div className={s.size}>{size}</div>
  <div style={{ backgroundColor: `${color.color}` }} className={s.color}>
    {color}
  </div>
  <div className={s.value}>1</div>
  <div className={s.price}>{price}</div>
</div>
  );
  };

 export default BasketItem;