SwiftUI List Row Background not Rendering Off Screen

Question

I'm experiencing a weird graphical issue where rows that start off screen do not have the correct background colour when they appear on screen but then forcing a re-render somehow fixes the issue.

Not sure if there is a way to force all elements to render correctly but as far as I can see I am using the modifier correctly.

Any help is greatly appreciated!

LIST VIEW

        List(sessionState.listItems) { groupitem in
            Section {
                ForEach(groupitem.items) { item in
                    ListRow(name: item.name, quantity: item.quantity)
                        .listRowSeparator(.hidden)
                        .listRowBackground(ListRowBackground(type: item.type))
                        .swipeActions(edge: .leading, allowsFullSwipe: true) {
                            ListRowButtonView(image: ButtonImage.trash.rawValue) {
                                withAnimation(.default) {
                                    onDeleteItem(item)
                                }
                            }
                        }
                        .swipeActions(edge: .trailing, allowsFullSwipe: true) {
                            ListRowButtonView(image: ButtonImage.fridge.rawValue, tint: Color.asset.gradientDark) {
                                withAnimation(.default) {
                                    handleOnMove(item)
                                }
                            }
                        }
                        .swipeActions(edge: .trailing, allowsFullSwipe: false) {
                            ListRowButtonView(tint: .green, systemImage: ButtonImage.plus.rawValue, label: "Increment") {
                                withAnimation(.default) {
                                    onUpdateQuantity(item, type: FBKeys.Increment.rawValue)
                                }
                            }
                        }
                        .swipeActions(edge: .trailing, allowsFullSwipe: false) {
                            decrementButton(for: item)
                        }
                }
            } header: {
                Text(LocalizedStringKey(groupitem.title))
                    .font(.custom("Roboto-Medium", size: 14, relativeTo: .body))
                    .foregroundColor(Color.asset.gradientPink)
            }
        }
        .listStyle(.grouped)
        .onAppear {
            UITableView.appearance().showsVerticalScrollIndicator = false;
        }

LIST ROW BACKGROUND VIEW

struct ListRowBackground: View {
    let type: String
    
    var body: some View {
        Rectangle()
            .overlay(
                Rectangle()
                    .fill(Color.asset.bg)
                    .padding([.trailing], 6)
            )
            .foregroundColor(Helpers.shared.getCategoryColor(for: type))
    }
}

As you can see in the screenshot, when i add another row from the "LIST" tab to the list of the "FRIDGE" tab and after when i go to the fridge tab I see the background of the row missing. Once I navigate to any other screen and then return to the "FRIDGE" tab i see the row backgrounds all rendered correctly.