AsyncImage behavior differs when added to HStack or ZStack or VStack.

Code 1: loading from the server every time I scroll back and forth.

     ScrollView {
      LazyVStack {
        ForEach(urls, id: \.absoluteString) { url in
          HStack {
            AsyncImage(url: url, transaction: .init()) { phase in
              if let image = phase.image {
                image.resizable()
              } else if phase.error != nil {
                Color.red
              } else {
                Color.blue
              }
            }
            .frame(width: 300, height: 200)
          }
        }
      }
    }

Code 2: Making network call only once.

     ScrollView {
      LazyVStack {
        ForEach(urls, id: \.absoluteString) { url in
          AsyncImage(url: url, transaction: .init()) { phase in
            if let image = phase.image {
              image.resizable()
            } else if phase.error != nil {
              Color.red
            } else {
              Color.blue
            }
          }
          .frame(width: 300, height: 200)

        }
      }
    }

The only difference here is the HStack. Does anyone know why?