The cart icon number is not updated on the product add from Ajax and the mini cart popup is not open

[mahesh_harsha]

  // Submit all items to the cart
      $.ajax({
        url: '/cart/add.js',
        method: 'POST',
        data: JSON.stringify(items),
        contentType: 'application/json',
        success: function(response) {
          console.log('Cart updated:', response);
        },
        error: function(xhr, status, error) {
          console.error('Error updating cart:', error);
        }
      }); 
        // Refresh cart content
            setTimeout(function() {
            $.getJSON('/cart.js', function(cart) {
              // Dispatch custom events to update UI
              document.dispatchEvent(new CustomEvent('cart:refresh', {
                bubbles: true,
                detail: cart.items
              }));
              
              // Optional: update cart icon directly
              $('#cart-icon-bubble .cart-count-bubble span').text(cart.item_count);
            });
          }, 100);
    });

I added the product using Ajax but the cart icon was not updating the first time adding the product and the mini cart pop-up is not opening