I wrote a View that consists of LeftView and a RightView, there is a Circle() in each view, but the RightView has an extra ScrollView.

When I drag the Circle(), the left Circle() can be moved to anyway I want, but the right one is limited by ScrollView.

As the picture show below(Left one is before being moved, right one is after being moved):

The following is my code:

// Main view

struct QuestionDemoView: View {
    var body: some View {
        HStack {
            LeftView()
                .border(.red, width: 1)
            RightView()
                .border(.red, width: 1)
        }
    }
}

struct LeftView: View {
    var body: some View {
        ShapeView()
    }
}

struct RightView: View {
    var body: some View {
        ScrollView {
            ShapeView()
        }
    }
}

// Circle

struct ShapeView: View {
    @State private var offset: CGSize = .zero
    var length: CGFloat = 100

    var dragGesture: some Gesture {
        DragGesture()
            .onChanged { value in
                offset = CGSize(width: value.startLocation.x + value.translation.width - length / 2,
                                height: value.startLocation.y + value.translation.height - length / 2)
            }
    }

    var body: some View {
        Circle()
            .frame(width: length, height: length, alignment: .center)
            .offset(offset)
            .gesture(dragGesture)
    }
}

How could I keep the right ScrollView so that RightView could scroll, and the right circle can be moved to all screen?

I will be very grateful if you can help me!!!