Video UIView subview is not showing on screen even though video is playing

Question

I have a VideoViewManager class which is used as a native component in my react native side code. VideoViewManager returns a class of type UIView, VideoView.swift.

I am trying to add subview to this VideoView class, which is basically a video player that is being returned from a Video Editing Api tool the subview -> (<VEPlaybackSDK.PlayablePreview: 0x7fabcd7467c0; baseClass = UIImageView; frame = (0 0; 200 200); userInteractionEnabled = NO; backgroundColor = UIExtendedSRGBColorSpace 0 1 0 1; layer = <AVPlayerLayer: 0x600003048810>>)

even though the addition of subview is successful, and the video is playing, i can hear the audio of the video, but the actual video player is not visible on screen.

Why is the video not visible? I can see the view element taking space in my viewport and the background color is also changing, but the video i am trying to play, the player is not visible

these are my classes

class PlaybackController: NSObject, RCTBridgeModule {
  static func moduleName() -> String {
    return "PlaybackController"
  }
  
  var playbackManager: PlaybackManager!
  let editor = VideoEditorManager()
  
  // Create an instance of VideoPlayerView
  var videoPlayerView: VideoPlayerView!
  
  // Override the designated initializer from NSObject
  override init() {
    super.init()
    editor.editor.getLicenseState(completion: { isValid in
      print("license is valid here")
      self.playbackManager = PlaybackManager(videoEditorModule: self.editor)
      self.playbackManager.addVideoContent(with: self.editor.selectedVideoContent)
      DispatchQueue.main.async {
        self.videoPlayerView = VideoPlayerView()
        
        self.playbackManager.setSurfaceView(with: self.videoPlayerView)
      }
    })
  }
}

class PlaybackManager: VideoEditorPlayerDelegate {

  init(videoEditorModule: VideoEditorManager) {
    self.videoEditorService = videoEditorModule.editor
    self.videoResolutionConfiguration = videoEditorModule.videoResolutionConfiguration
    self.playbackSDK = VEPlayback(videoEditorService: videoEditorService)
  }


func addVideoContent(with videoUrls: [URL]) {
    //  func addVideoContent(with videoUrls: URL) {
    let videoSequence = createVideoSequence(with: videoUrls)
    //    let videoSequence = VideoSequence(folderURL: "")
    self.videoSequence = videoSequence
    //    videoSequence.addVideo(at: videoFileURL)
    
    // Create VideoEditorAsset from relevant sequence
    // VideoEditorAsset is entity of VideoEditor used for plaback
    let videoEditorAsset = VideoEditorAsset(
      sequence: videoSequence,
      isGalleryAssets: true,
      isSlideShow: false,
      videoResolutionConfiguration: videoResolutionConfiguration
    )
    
    
    if videoEditorService != nil  {
      //        let videoPlayerView = VideoPlayerView()
      // Set current video asset to video editor service
      self.videoEditorService?.setCurrentAsset(videoEditorAsset)
      
      // self.setSurfaceView(with: videoPlayerView)
      
      // Setup preview render size
      self.setupRenderSize(videoSequence: videoSequence)
    }
  }
  
  
  // Provides video player preview
  func setSurfaceView(with playerContainerView: VideoPlayerView!)  {
    DispatchQueue.main.async {
      // if VideoPlayer is not nil
      if let playerContainerView = playerContainerView {
        print("playerContainerView==",playerContainerView)
        
        let playbackView = self.playbackSDK.getPlayableView(delegate: self)
        self.playbackView = playbackView
        
        // if subview of video player is added already
        if self.isVideoAdded {
          
          print("playbackView ALREADY ADDED as a subview to playerContainerView")
        } else {
          print("playbackView subview not there currently, adding")
          self.isVideoAdded = true
          playerContainerView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
          
          playbackView.contentMode = .scaleAspectFit // or other suitable content mode
          playbackView.frame = CGRect(x: 0, y: 0, width: 200, height: 200) // Adjust the width and height as needed
          playbackView.backgroundColor = UIColor.green
          
          playerContainerView.addSubview(playbackView)
          playerContainerView.bringSubviewToFront(playbackView)
          playbackView.frame = playerContainerView.bounds
          // Disable autoresizing mask so that constraints work
             playbackView.translatesAutoresizingMaskIntoConstraints = false
             
 
          
          // Add Auto Layout constraints to position playbackView
          playerContainerView.layoutSubviews()
          
          
          // Force layout update
          self.player?.play(loop: true, fixedSpeed: true)
          
          print("playerContainerView.subviews== \(playerContainerView.subviews)")
          
        }
      }
    }
    
  }


}

@objc(VideoPlayerManager)
class VideoPlayerManager: RCTViewManager {
    override func view() -> UIView! {
        return VideoPlayer()
    }
override static func requiresMainQueueSetup() -> Bool {
        return true
    }
}

class VideoPlayerView: UIView {


  override init(frame: CGRect) {
      super.init(frame: frame)
  }
  
  override func layoutSubviews() {
     super.layoutSubviews()
     self.backgroundColor = UIColor.red
     self.subviews.first?.frame = self.bounds
   }

 required init?(coder aDecoder: NSCoder) {
      super.init(coder: aDecoder)
  }
}