DragGesture in ScrollView gets stuck

I would like to drag a View inside of a ScrollView. When scrolling I found, that sometimes the DragGesture() gets triggered while scrolling. How could this be blocked while scrolling and why is this behavior, the .onEnded doesn't get triggered then.

Video: https://imgur.com/a/UwUa4Z5

struct ContentView: View {
    @State var offset: CGFloat = 0
    @State var lastOffset: CGFloat = 0
    var body: some View {
        ScrollView{
            VStack{
                Spacer()
                Text("Hello, world!")
                    .frame(width: UIScreen.main.bounds.width * 0.9)
                    .padding(5)
                    .background(RoundedRectangle(cornerRadius: 5).foregroundColor(Color(uiColor: UIColor.systemGray6)))
                    
                    .offset(x: offset)
                    .gesture(DragGesture(minimumDistance: 10, coordinateSpace: .local).onChanged({val in
                        offset = val.translation.width + lastOffset
                    }).onEnded({val in
                        if offset < -20{
                            withAnimation{
                                offset = -40
                            }
                        }else{
                            withAnimation{
                                offset = 0
                            }
                        }
                        lastOffset = offset
                        
                    }))
                    .background(Color.red)
                    .clipShape(RoundedRectangle(cornerRadius: 5))
                Spacer()
            }
        }.frame(width: UIScreen.main.bounds.width)
    }
}