I can’t make my own scrollable content if i have a huge data in there. Can you give me an advises how can i make it? So i have view:

struct TestLazyStack: View {
    let segmentWidh: CGFloat = 50
    let segmentRange = 1...1000
    @State private var counter: Int = 0
    @State private var offsetX: CGFloat = .zero
    @State private var lastOffsetX: CGFloat = .zero
    var body: some View {
        VStack {
            VStack {
                LazyHStack(spacing: 0) {
                    ForEach(segmentRange, id: .self) { id in
                        SegmentView(id: id) {
                            counter += 1
                        }
                    }
                }
                .frame(width: segmentWidh * CGFloat(segmentRange.count), height: 35)
                .background(Color.blue)
                .clipped()
            }
        }
        .offset(x: offsetX)
        .gesture(
            DragGesture().onChanged({ value in
                offsetX = lastOffsetX + value.translation.width
            })
            .onEnded({ _ in
                lastOffsetX = offsetX
            })
        )
        .frame(maxHeight: .infinity)
        .overlay(
            VStack {
                Text("(counter)")
                Spacer()
            }
        )

    }
    

}

struct SegmentView: View {
    let id: Int
    let segmentWidh: CGFloat = 50
    let onAppearAction: () -> Void
    var body: some View {
        Text("(id)")
            .frame(width: segmentWidh)
            .font(.title)
            .foregroundColor(.white)
            .onAppear() {
                onAppearAction()
            }
    }

}

#Preview {
    TestLazyStack()
}

So if I have for example 4000 elements it’s works very slowly.