ios – AsyncImage on multiple horizontal scrollview is not loading properly

I have two horizontal ScrollViews, each scroll view is a HStack of 10 Movie cards.
Each card will have an image of the movie and its details.

Movie Card View

struct MovieCardView: View {
    var movie: PopularMovie
    
    var body: some View {
        LazyVStack {
            AsyncImage(url: URL(string: ServiceLayer.Image.mid.url + movie.backdropPath), transaction: Transaction(animation: .easeInOut)) { phase in
                switch phase {
                case .empty:
                    ProgressView()
                case .success(let image):
                    image
                        .resizable()
                        .onAppear {
                            print(ServiceLayer.Image.mid.url + movie.backdropPath)
                        }
                case .failure:
                    Image(systemName: "wifi.slash")
                        .onAppear {
                            print(ServiceLayer.Image.mid.url + movie.backdropPath)
                        }
                @unknown default:
                    EmptyView()
                }
                    
            }
            .frame(width: 300, height: 200)
            LazyVStack(alignment: .leading, spacing: 5) {
                Text(movie.title)
                    .font(.headline)
                Text(movie.releaseDate)
                    .font(.caption)
                    .foregroundColor(.secondary)
            }.padding()
        }
        .background(.ultraThinMaterial)
        .mask {
            GeometryReader { geo in
                Rectangle()
                    .cornerRadius(10)
                    .frame(width: geo.frame(in: .global).width, height: geo.frame(in: .global).height)
            }
        }
        .padding(.horizontal)
    }
}

Top Rated Movies view

struct TopRatedMoviesView: View {
    @EnvironmentObject var moviesViewModel: MoviesViewModel
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text("Top Rated Movies")
                .font(.title)
                .bold()
                .padding(.horizontal)
            ScrollView(.horizontal) {
                HStack {
                    ForEach(moviesViewModel.topRatedMovies) { movie in
                        MovieCardView(movie: movie)
                    }
                }
            }
        }
        .loading(isLoading: moviesViewModel.isLoading)
        .alert(isPresented: $moviesViewModel.isErrorOccured, error: moviesViewModel.errorMsg, actions: {
            Button {} label: {
                Text("OK")
            }
            
        })
        .task {
            await moviesViewModel.getTopRatedMovies()
        }
    }
}

Popular Movies View

struct PopularMoviesView: View {
    @EnvironmentObject var moviesViewModel: MoviesViewModel
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text("Popular Movies")
                .font(.title)
                .bold()
                .padding(.horizontal)
            ScrollView(.horizontal) {
                HStack {
                    ForEach(moviesViewModel.popularMovies) { movie in
                        MovieCardView(movie: movie)
                    }
                }
            }
        }
        .loading(isLoading: moviesViewModel.isLoading)
        .alert(isPresented: $moviesViewModel.isErrorOccured, error: moviesViewModel.errorMsg, actions: {
            Button {} label: {
                Text("OK")
            }
            
        })
        .task {
            await moviesViewModel.getPopularMovies()
        }
    }
}

PopularMoviesView and TopRatedMoviesView using the MovieCardView to display the movie in a ForEach loop.

If I display the view separately, It gives the expected result. But if I put this in a VStack and display in a single view, Either one of the view’s AsyncImage is loading another one is displaying the placeholder image.

Home View

struct HomeView: View {
    @StateObject var moviesViewModel: MoviesViewModel = MoviesViewModel()
    var body: some View {
        VStack {
            PopularMoviesView()
            TopRatedMoviesView()
        }
        .environmentObject(moviesViewModel)
    }
}

Final output

Can anyone, explain why this is happening and give me a solution to solve this problem!

Thanks in advance.