Firestore only returns 1 item

Question

When I make a call to the firestore it returns the correct amount of items but shows them both as the sam item, rather than the 2 separate items

e.g I have a recipe for chicken curry and a recipe for salmon and rice but only the salmon and rice recipe gets shown

Here is my code to show the data I get back

import SwiftUI
import SDWebImageSwiftUI

struct CardView: View {
    @EnvironmentObject var model: RecipesViewModel
    var body: some View {
        ForEach(model.Recipes,id: \.id) {item in
            VStack{
                ZStack(alignment: .bottomTrailing){
                    WebImage(url: URL(string: item.imageURL))
                        .resizable()
                        .scaledToFit()
                        .cornerRadius(8)
                        .frame(width: 150, height: 150)
                    HStack{
                        Text("\(item.likes)")
                        
                        Image(systemName: "heart")
                    }
                    .foregroundColor(Color(hex: "FF0044"))
                    .padding(5)
                    .background(.white)
                    .cornerRadius(8)
                    .padding(7)
                    
                }
                
                
                Text(item.name)
                    .foregroundColor(.black)
                    .fontWeight(.medium)
                    .font(.system(size: 20))
                    .padding(.top)
                
                
                HStack{
                    Image(systemName: "clock")
                        .foregroundColor(.gray)
                    Text("\(item.prepMins) mins")
                        .foregroundColor(.gray)
                }
                .padding(5)
                .padding(.trailing)
            }
        }
    }
}

struct CardView_Previews: PreviewProvider {
    static var previews: some View {
        CardView()
        PopularRecipes()
        AllPopular()
    }
}

struct PopularRecipes:View{
    
    @State var presented1:Bool = false
    @StateObject var model = RecipesViewModel()
    
    var body: some View{
        
        VStack{
            HStack{
                Text("Popular")
                    .font(.system(size: 20))
                    .fontWeight(.medium)
                Spacer()
                Button {
                    presented1.toggle()
                } label: {
                    Text("View All")
                        .foregroundColor(.gray)
                }
                .fullScreenCover(isPresented: $presented1, content: AllPopular.init)
                
                
            }
            .padding(.horizontal)
            .padding(.bottom)
            ScrollView(.horizontal,showsIndicators: false){
                
                
                HStack{
                    ForEach(model.Recipes, id: \.id) {item in
                        CardButton()
                            .padding(.horizontal)
                    }
                }
            }
        }
        .environmentObject(model)
        .onAppear {
            model.getData()
        }
    }
}


struct AllPopular:View{
    @Environment(\.presentationMode) var presentationMode
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
    ]
    @EnvironmentObject var model: RecipesViewModel
    
    var body: some View{
        VStack{
            HStack{
                Button {
                    presentationMode.wrappedValue.dismiss()
                } label: {
                    Image(systemName: "arrow.left")
                        .foregroundColor(.black)
                        .font(.system(size: 30))
                }
                Spacer()
                Text("All Popular Recipes")
                    .font(.system(size: 20))
                    .fontWeight(.semibold)
                    .padding()
                Spacer()
            }
            .padding(.horizontal)
            ScrollView {
                LazyVGrid(columns: columns, spacing: 20) {
                    ForEach(model.Recipes, id: \.id) { item in
                        CardButton()
                    }
                }
                .padding(.horizontal)
            }
        }
        .navigationTitle("")
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct CardButton:View{
    @EnvironmentObject var model: RecipesViewModel
    @State var presented: Bool = false
    
    var body: some View{
        ForEach(model.Recipes, id: \.id){item in
//            NavigationLink(destination: Recipe(name: item.name, cuisine: item.cuisine, difficulty: item.difficulty, dishType: item.dishType, prepMins: item.prepMins, prepHours: item.prepHours, cookMins: item.cookMins, cookHours: item.cookHours, restMins: item.restMins, restHours: item.restHours, likes: item.likes, imageURL: item.imageURL), label: {CardView()}).navigationBarBackButtonHidden(true).navigationTitle("").navigationBarHidden(true)
            Button {
                presented.toggle()
            } label: {
                CardView()
            }
            .fullScreenCover(isPresented: $presented) {
                Recipe(name: item.name, cuisine: item.cuisine, difficulty: item.difficulty, dishType: item.dishType, prepMins: item.prepMins, prepHours: item.prepHours, cookMins: item.cookMins, cookHours: item.cookHours, restMins: item.restMins, restHours: item.restHours, likes: item.likes, imageURL: item.imageURL)
            }



        }
    }
}

Here is where I get the data from the firestore

import Foundation
import Firebase

class RecipesViewModel: ObservableObject {
    
    @Published var Recipes = [RecipesData]()
    
    func getData() {
        
        // Get a reference to the database
        let db = Firestore.firestore()
        
        // Read the documents at a specific path
        db.collection("Recipes").getDocuments { snapshot, error in
            
            // Check for errors
            if error == nil {
                // No errors
                
                if let snapshot = snapshot {
                    
                    // Update the list property in the main thread
                    DispatchQueue.main.async {
                        
                        
                        self.Recipes = snapshot.documents.map { d in
                            
                            return RecipesData(id: d["id"] as? String ?? "", name: d["name"] as? String ?? "", cuisine: d["cuisine"] as? String ?? "", difficulty: d["difficulty"] as? String ?? "", dishType: d["dishType"] as? String ?? "", prepMins: d["prepMins"] as? Int ?? 0, prepHours: d["prephours"] as? Int ?? 0, cookMins: d["cookMins"] as? Int ?? 0, cookHours: d["cookHours"] as? Int ?? 0, restMins: d["restMins"] as? Int ?? 0, restHours: d["restHours"] as? Int ?? 0, likes: d["likes"] as? Int ?? 0, imageURL: d["imageURL"] as? String ?? "")
                        }
                    }
                    
                    
                }
            }
            else {
                
            }
        }
    }
}

and here is the struct of RecipesData

import SwiftUI
import FirebaseFirestoreSwift

struct RecipesData: Identifiable{
    var id: String
    var name: String
    var cuisine: String
    var difficulty: String
    var dishType: String
    var prepMins: Int
    var prepHours: Int
    var cookMins: Int
    var cookHours: Int
    var restMins: Int
    var restHours: Int
    var likes: Int
    var imageURL: String
}

Here is an image of my output

What am I doing wrong and how can I fix my error?

EDIT - console log