matchedGeometryEffect in LazyVGrid

I have a LazyVGrid of items which when tapped I want to showing details of that item.
When the item is tapped the item should animate to the detail view with matchedGeometryEffect. However this doesn’t work. Even with the withAnimation there is no animation.

How can this code work with matchedGeometryEffect?
Any help will be appreciated.

I have replaced the items in the grid with numbers to make it simpler.

Code Block Swiftstruct ContentView: View {
	@Namespace private var animation
	@State private var showingDetail = false
	@State private var selection = -1
	var detail: some View {
		VStack {
			Spacer()
			Image(systemName: "\(selection).square")
				.resizable()
				.scaledToFit()
				.matchedGeometryEffect(id: selection, in: animation)
			Spacer()
			
			Text("Number \(selection)")
				.font(.headline)
				.padding(.bottom)
		}
	}
	var grid: some View {
		ScrollView {
			LazyVGrid(columns: [GridItem(.adaptive(minimum: 100, maximum: 100))]) {
				ForEach(0 ..< 20) { num in
					Image(systemName: "\(num).square")
						.resizable()
						.scaledToFit()
						.frame(width: 100, height: 100)
						.matchedGeometryEffect(id: num, in: animation)
						.onTapGesture {
							selection = num
							withAnimation { showingDetail = true }
						}
				}
			}
		}
	}
	var body: some View {
		NavigationView {
			Group {
				if showingDetail {
					detail
						.toolbar {
							Button {
								withAnimation { showingDetail = false }
							} label: {
								Image(systemName: "xmark.circle.fill")
									.imageScale(.large)
									.foregroundColor(.secondary)
							}
						}
				} else {
					grid
				}
			}
			.navigationTitle(showingDetail ? "" : "Numbers")
			.navigationBarTitleDisplayMode(showingDetail ? .inline : .automatic)
		}
	}
}