Video Rendering Not Smooth In ScrollView

I have a basic SwiftUI scroll view that houses many videos. When I take out the red color inside the video player the scroll view is very smooth and I can swipe down and up as fast as I can without any glitches. However, when I add the red color and swipe down and then swipe up the scroll view glitches as the videos render once again. How can I fix this glitch? Also apps such as Instagram or Twitter have videos already rendered right when they appear, and scrolling away and coming back will not cause them to re-render. How can I achieve such behavior? Doing this might fix the glitch when the videos render.

Copy pasteable code

import SwiftUI
import AVFoundation
import AVKit

struct allVids: Identifiable, Hashable {
    var id: String
    var video: String?
}

struct MainTabViewXX: View {
    @State var someData: [allVids] = [
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0A514500-F1A0-4093-98A2-2847FE46484A.mp4?alt=media&token=69afd165-1ab6-4686-9ad2-2ce485090fe1"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2FE8937043-873E-4178-A90D-C6C03684C700.mp4?alt=media&token=ddc1f616-5427-4722-a96f-ab81739b243e"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2FE8937043-873E-4178-A90D-C6C03684C700.mp4?alt=media&token=ddc1f616-5427-4722-a96f-ab81739b243e"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2FE8937043-873E-4178-A90D-C6C03684C700.mp4?alt=media&token=ddc1f616-5427-4722-a96f-ab81739b243e"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2FE8937043-873E-4178-A90D-C6C03684C700.mp4?alt=media&token=ddc1f616-5427-4722-a96f-ab81739b243e"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84")]
    
    var body: some View {
        ScrollView {
           LazyVStack(spacing: 1){
               ForEach(someData) { message in
                    MessageView(urlV: URL(string: message.video ?? "")!, video: message)
               }
           }
        }.ignoresSafeArea()
    }
}

struct MessageView: View {
    @State var urlV: URL
    let video: allVids
    
    var body: some View {
        VStack {
            MessageVideoPlayerX(url: urlV, viewID: video.id)
        }
    }
}

struct MessageVideoPlayerX: View {
    @State var player: AVPlayer? = nil
    let url: URL
    @State var viewID: String
    
    init(url: URL, viewID: String? = nil) {
        self.url = url
        _viewID = State(initialValue: viewID ?? UUID().uuidString)
    }
    
    var body: some View {
        VStack {
            if let vid = player {
                VidPlayer(player: vid).frame(width: 200, height: 350)
            }
            Color.red.frame(width: 200, height: 300)
        }
        .onAppear {
            if player == nil {
                player = AVPlayer(url: url)
            }
            self.player?.isMuted = true
            
            self.player?.play()
        }
        .onDisappear {
            self.player?.pause()
        }
    }
}

struct VidPlayerX : UIViewControllerRepresentable {
    var player : AVPlayer
    
    func makeUIViewController(context: UIViewControllerRepresentableContext<VidPlayerX>) -> AVPlayerViewController {

        let controller = AVPlayerViewController()
        controller.player = player
        controller.showsPlaybackControls = false
        controller.allowsVideoFrameAnalysis = false
        controller.videoGravity = .resizeAspectFill
        return controller
    }
    
    func updateUIViewController(_ uiViewController: AVPlayerViewController, context: UIViewControllerRepresentableContext<VidPlayerX>) { }
}

Try this approach, using let player: AVPlayer instead of re-constructing one in the .onAppear every time the MessageVideoPlayerX appears.

struct MessageVideoPlayerX: View {
    let player: AVPlayer // <--- here
    let url: URL
    let viewID: String

   init(url: URL, viewID: String? = nil) {
       self.url = url
       self.viewID = viewID ?? UUID().uuidString
       self.player = AVPlayer(url: url)  // <--- here
   }

    var body: some View {
        VStack {
            VidPlayerX(player: player).frame(width: 200, height: 350) // <--- here
            Color.red.frame(width: 200, height: 350)
        }
       .onAppear {
           player.isMuted = true
           player.play()
       }
       .onDisappear {
           player.pause()
       }
   }
}