How to change PKCanvas view based on CoreData

Question

I have this view here:

struct DrawingView: View {
    @Environment(\.managedObjectContext) var moc
    
    // Drawing
    @Binding var canvasView: PKCanvasView 
    @State private var selectedBrushIndex = 0
    @State private var isErasing = false
    @State private var color: Color = Color.black
    @State private var brush = 0
    
    @State private var selectedFrame: Frame = Frame()
    
    // Animation
    @State private var isPlaying: Bool = false
    @State private var one: Bool = false
    
    // Current Frame
    @State private var selectedFrameIndex = 0
    
    var animation: Project
    
    var body: some View {
        let frameData = animation.frameArray[selectedFrameIndex].drawing!
 PencilKitCanvas(canvasView: $canvasView, selectedBrush: brushes[selectedBrushIndex], isErasing: isErasing, drawingData: frameData)


ScrollView(.horizontal) {
                                HStack {
                                    ForEach(animation.frameArray.indices, id: \.self) { index in
                                        Button {
                                            if selectedFrameIndex != index {
                                                selectedFrameIndex = index
                                            }
                                            canvasView.drawing = PKDrawing()
                                            canvasView.drawing = try! PKDrawing(data: animation.frameArray[index].drawing!)
                                            print(animation.frameArray[index].drawing)
                                            print(index)
                                        } label: {
                                            if selectedFrameIndex == index {
                                                HStack {
                                                    Text(String (index+1))
                                                    Image(systemName: "photo.fill")
                                                }
                                                .padding()
                                            } else {
                                                HStack {
                                                    Text(String (index+1))
                                                    Image(systemName: "photo")
                                                }
                                                .padding()
                                            }
                                        }
                                    }
                                }
                            }

Whenever I click on the frame in the horizontal scroll view, sometimes it goes to the right frame, and othertimes it goes through all other frames in the frameArray. How do I fix this? Let me know if you need any more help. Thank you!