@Binding does not work properly when being used in UIViewControllerRepresentable container

The following PickerView uses a @Binding var value: String? to show and pick some value.

It should be possible to use optional and non-optional values as @Binding input. To achive this, the PickerView has two inits. One taking in an optional binding, and one a non optional.

Value changes uses a custom animation transition

While this works fine, when PickerView is uses inside a regular SwiftUI view, the animation of the non-optional value fails when being uses inside a UIViewControllerRepresentable container.

As you can see, the non-optional value within the container (bottom value in yellow section) is updated without animation. All other values are correctly animated.

How can this be solved?

Code:

struct PickerView: View {
    @Binding var value: String?
    private var allowNil: Bool = false
    
    // Init with optional Binding input
    init(value: Binding<String?>) {
        self._value = value
        allowNil = true

    }
    
    // Init with non-optional Binding input
    init(value: Binding<String>) {
        self._value = Binding<String?>(get: {
            value.wrappedValue
        }, set: { newValue in
            if let newValue = newValue {
                value.wrappedValue = newValue
            }
        })
    }
    
    var body: some View {
        VStack {
            Text("Allow Nil: \(allowNil)")
            
            Text(value ?? "-")
                .transition(textTransition)
                .id(value)
            
            Button("Change Value") {
                withAnimation {
                    value = String(UUID().uuidString.prefix(8))
                }
            }
        }
    }
    
    private var textTransition: AnyTransition {
        .asymmetric(
            insertion: .move(edge: .bottom).combined(with: .opacity),
            removal: .move(edge: .top).combined(with: .opacity)
        )
    }
}

struct PickerPreview: View {
    @State var optionalValue: String? = "optional"  // OK
    @State var value: String = "non optional"  // Fails in Container
    
    var body: some View {
        VStack {
            ContainerView {
                VStack(spacing: 20) {
                    VStack {
                        Text("Container:")
                        Text("optional OK, non optional Fails")
                    }
                    .font(.headline)
                    
                    PickerView(value: $optionalValue)
                    PickerView(value: $value)
                }
            }
            
            VStack(spacing: 20) {
                Text("Both OK")
                    .font(.headline)
                
                PickerView(value: $optionalValue)
                PickerView(value: $value)
            }
        }
    }
}


struct ContainerView<Content: View>: UIViewControllerRepresentable {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    
    func makeUIViewController(context: Context) -> UIViewController {
        let containerVC = UIViewController()
        containerVC.view.backgroundColor = .yellow
        
        let contentVC = UIHostingController(rootView: self.content)
        contentVC.view.backgroundColor = .clear
        context.coordinator.contentVC = contentVC
        
        contentVC.willMove(toParent: containerVC)
        containerVC.addChild(contentVC)
        
        contentVC.view.translatesAutoresizingMaskIntoConstraints = false
        containerVC.view.addSubview(contentVC.view)
        NSLayoutConstraint.activate([
            contentVC.view.topAnchor.constraint(equalTo: containerVC.view.topAnchor),
            contentVC.view.bottomAnchor.constraint(equalTo: containerVC.view.bottomAnchor),
            contentVC.view.leadingAnchor.constraint(equalTo: containerVC.view.leadingAnchor),
            contentVC.view.trailingAnchor.constraint(equalTo: containerVC.view.trailingAnchor)
        ])
        
        contentVC.didMove(toParent: containerVC)
        
        return containerVC
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
        context.coordinator.contentVC?.rootView = content
    }
    
    func makeCoordinator() -> Coordinator {
        return Coordinator()
    }
    
    class Coordinator: NSObject, UIScrollViewDelegate {
        var contentVC: UIHostingController<Content>?
    }
}


#Preview {
    PickerPreview()
}

I don't have an explanation of what's going on, but the designated way to create a Binding<T?> from Binding<T> is to use this initialiser.

// Init with non-optional Binding input
init(value: Binding<String>) {
    self._value = Binding(value)
}

The animation now works as expected.

It also works if you get the Binding<String?> from a computed property on String:

extension String {
    var optional: String? {
        get { self }
        set {
            if let newValue {
                self = newValue
            }
        }
    }
}

// ...

init(value: Binding<String>) {
    self._value = value.optional
}