Keep getting unique “key” error message even though a key has been added

I have created a .map for my fetched products from shopify but for some reason, even though everything is working, I am getting this error message that says Each child in a list should have a unique "key" prop. even though my <div> has a key added to it. Here is my code below.

Products.jsx:

const fetchProducts = async () => {
  const response = await fetch(`https://<MyShopifyStore>.myshopify.com/api/2024-10/graphql.json`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': ''
    },
    body: JSON.stringify({
      query: `
        {
          products(first: 10) {
            edges {
              node {
                title
                descriptionHtml
                images(first: 1) {
                  edges {
                    node {
                      src
                    }
                  }
                }
              }
            }
          }
        }
      `,
    }),
  });

  const { data } = await response.json();
  return data.products.edges;
};

const Products = () => {
  const [productsList, setProductsList] = useState([]);
  
  useEffect(() => {
    const getProducts = async () => {
      const productData = await fetchProducts();
      setProductsList(productData)
    };

    getProducts();
  }, []);

// Problem is below
  
  return (
    <div className="product-container">
      {
        productsList.map(({ node }) => (
          <div key={node?.id}>
            <h2>{node.title}</h2>
            <div dangerouslySetInnerHTML={{ __html: node.descriptionHtml }} />
            {node.images.edges.length > 0 && (
              <img src={node.images.edges[0].node.src} alt={node.title} />
            )}
          </div>
        ))
      }
    </div>
  )
}

export default Products

What am I doing wrong?