ai/rsc components streamed through createStreamableUI are mounted multiple times when updating the ui node (update/done) about ai HOT 4 OPEN

  completion.onEvent("add_products_to_cart", async (data) => {
    let streamableCart:
      | ReturnType<typeof createStreamableValue<Product>>
      | undefined;

    if (data.state === "START" || !streamableCart) {
      streamableCart = createStreamableValue<Product>();
    } else {
      const { products } = data;

      const product = products[Object.keys(products)[0]][0];

      if (product) {
        ui.update(
          <>
            <EventMessage>
              {Object.keys(products).length} prodotti aggiunti al carrello
            </EventMessage>
            <AddToCart products={streamableCart.value} />
          </>,
        );

        streamableCart.done(product);
      }
    }
  }); 

export function AddToCart({
  products,
}: {
  products: StreamableValue<Product>;
}) {
  const { addToCart } = useShoppingCartActions();

  useEffect(() => {
    (async () => {
      let productsToAdd: Product[] = [];
      for await (const product of readStreamableValue(products)) {
        if (product) {
          productsToAdd.push(product);
        }
      }
      if (productsToAdd.length > 0) {
        console.log({ productsToAdd });
        addToCart(productsToAdd);
      }
    })();
  }, [products]);

  return null;
}