How to clip background blur in SwiftUI - swiftui

Question

I am trying to have a semi-transparent blurred overlaying view but the blur creates a fuzzy edge and I'd like it to be sharp outlining the overlay shape, ie clip it.
struct TestBlur : View {
var body : some View {
HStack {
VStack {
Spacer()
Text("Hello World")
Spacer()
}
.frame(width: 128)
.background(Color.red.opacity(0.5).blur(radius: 16).clipShape(Rectangle()))
Spacer()
}
.background(Color.yellow)
}
}
I want the edge of the red overlay to be like so:
In essence I want the red view to blur anything below it and have a sharp edge:
Using #Asperi's BackgroundBlurView also doesn't work, there's no blur done (maybe I am not using this right):
var body : some View {
ZStack {
VStack {
ForEach(0..<40) { i in
Text("ABCDEFGHIKLMNOPQRSTUVWXYZ ABCDEFGHIKLMNOPQRSTUVWXYZ ABCDEFGHIKLMNOPQRSTUVWXYZ ABCDEFGHIKLMNOPQRSTUVWXYZ ABCDEFGHIKLMNOPQRSTUVWXYZ ")
}
.rotationEffect(Angle.init(degrees: 0))
}
.opacity(0.9)
.background(Color.yellow)
HStack {
// Trying to make the below VStack have a semi-transparent background and blur all content below it
// but the VStack needs to have a sharp edge, not fuzzy.
VStack {
Spacer()
Text("Hello World")
Spacer()
}
.frame(width: 128)
.background(Color.red.opacity(0.5))
.background(BackgroundBlurView().opacity(0.8))
Spacer()
}
}
}
struct BackgroundBlurView: UIViewRepresentable {
func makeUIView(context: Context) -> UIView {
let view = UIVisualEffectView(effect: UIBlurEffect(style: .light))
DispatchQueue.main.async {
view.superview?.superview?.backgroundColor = .clear
}
return view
}
func updateUIView(_ uiView: UIView, context: Context) {}
}
Looks like this (lacks blur):