Unable to display items from Local Storage

I’m creating a shopping cart ,in which I am having a problem that I am unable to get the items from local storage and display it on my page ,I’m new to web development so it’s so confusing can you guy’s take a look at my code and tell me what am I doing wrong here.

Here’s my JavaScript

let shopItemsData = [
  {
    id: "jfhgbvnscs",
    name: "Casual Shirt",
    price: 45,
    desc: "Lorem ipsum dolor sit amet consectetur adipisicing.",
    img: "images/img-1.jpg",
  },
  {
    id: "ioytrhndcv",
    name: "Office Shirt",
    price: 100,
    desc: "Lorem ipsum dolor sit amet consectetur adipisicing.",
    img: "images/img-2.jpg",
  },
  {
    id: "wuefbncxbsn",
    name: "T Shirt",
    price: 25,
    desc: "Lorem ipsum dolor sit amet consectetur adipisicing.",
    img: "images/img-3.jpg",
  },
  {
    id: "thyfhcbcv",
    name: "Mens Suit",
    price: 300,
    desc: "Lorem ipsum dolor sit amet consectetur adipisicing.",
    img: "images/img-4.jpg",
  },
];

// everytime u slecetd cart its gona store the data in the basket

let basket = JSON.parse(localStorage.getItem("data")) || [];

const productsContainer = document.querySelector(".products");

function displayProducts(data) {
  productsContainer.innerHTML = data
    .map((item) => {
      let { id, name, price, desc, img } = item;
      let search = basket.find((x) => x.id === id || []);

      return `
    <div id=product-id-${id} class="product">
            <img src=${img} alt="">
            <div class="details">

                <h3>${name}</h3>
                <span>${desc}</span>
                <div class="price">
                    <h3>${"$ " + price}</h3>
                    <div class="buttons">
                        <i onclick="decrement(${id})" class="ri-subtract-fill"></i>
                        <span id=${id} class="quantity" >${
        search.item === undefined ? 0 : search.item
      }</span>
                        <i onclick="increment(${id})"  class="ri-add-line"></i>
                    </div>
                </div>
            </div>
        </div>
    
    `;
    })
    .join("");
}

displayProducts(shopItemsData);

/**
 * first search in basket that if the item exist or not if not push the item in basket and if yes increase the basket's item quantity
 **/

let increment = (id) => {
  let selectedItem = id;

  let search = basket.find((x) => x.id === selectedItem.id);

  if (search === undefined) {
    basket.push({
      id: selectedItem.id,
      item: 1,
    });
  } else {
    search.item += 1;
  }

  //   console.log(basket);
  localStorage.setItem("data", JSON.stringify(basket));

  upgrade(selectedItem.id);
};

let decrement = (id) => {
  let selectedItem = id;

  let search = basket.find((x) => x.id === selectedItem.id);

  if (search === undefined) return;
  else if (search.item === 0) return;
  else {
    search.item -= 1;
  }

  //   console.log(basket);
  localStorage.setItem("data", JSON.stringify(basket));
  upgrade(selectedItem.id);
};

let upgrade = (id) => {
  let search = basket.find((x) => x.id === id);
  //   console.log(search.item);
  document.getElementById(id).innerHTML = search.item;
  calculation();
};

let calculation = () => {
  let cartIcon = document.getElementById("cartAmount");
  cartIcon.innerHTML = basket.map((x) => x.item).reduce((x, y) => x + y, 0);
};

// Saving data in local storage

I tried other resources and videos to get help but I am unable to solve this problem.
Thanks in advance