SF Symbols .replace animation is weird

In SF Symbols 7, I'm observing a discrepancy between the .replace animation previewed in the SF Symbols app and the result when using the code template the app provides.

Expected behavior: When previewing the .replace animation in the SF Symbols app (with Magic Replace preferred), the transition looks like:

Actual behavior: When I implement the animation using the exact code template generated by the SF Symbols app, the result looks like:

My code:

struct PlaygroundSwiftUIView: View {
    
    @State var name = "folder.circle"
    
    var body: some View {
        Image(systemName: name)
            .font(.system(size: 60))
            .contentTransition(.symbolEffect(.replace))
            .onTapGesture {
                name = "tree"
            }
    }
}

#Preview {
    PlaygroundSwiftUIView()
}

The animation rendered in my app does not match the preview shown in the SF Symbols app. The drawOff animation is partly missing. Is there something missing from the code template, or is there an additional configuration step required to achieve the correct Replace effect?