Detecting Tap on an entity that has a videoMaterial

Hello Everyone,

I'm currently facing a challenge related to detecting taps on an entity that features video material. Based on the information I found online, it appears that in order to enable touch functionality, the recommended approach is to clone the entity and add an InputTargetComponent while also enabling collision shapes.

Here's a snippet of my code:

RealityView { content, attachments in
    // The following code doesn't trigger the tapGesture
  let videoEntity = ImmersivePlayerEntity(configuration: configuration)
    content.add(videoEntity)
   //
 
    if let attachment = attachments.entity(for: "player-controls") {
        anchorEntity.addChild(attachment)
        content.add(anchorEntity)
    }
    
    /* This code triggers the tapGesture
             let boxResource = MeshResource.generateBox(size: 2)
             let itemMaterial = SimpleMaterial(color: .red, roughness: 0, isMetallic: false)
             let entity = ModelEntity(mesh: boxResource, materials: [itemMaterial]).addTappable()
             content.add(entity)
*/
}
update: { _, _ in

}
attachments: {
    Attachment(id: "player-controls") {
        ImmersivePlayerControlsView(coordinator: coordinator)
            .frame(width: 1280)
            .opacity(areControlsVisible ? 1 : 0)
            .animation(.easeInOut, value: areControlsVisible)
    }
}
.gesture(
    SpatialTapGesture()
        .targetedToAnyEntity()
        .onEnded { value in
            areControlsVisible.toggle()
        }
)

extension Entity
{
    func addTappable() -> Entity {
        let newModelEntity = self.clone(recursive: true)
        newModelEntity.components.set(InputTargetComponent())
        newModelEntity.generateCollisionShapes(recursive: true)
        return newModelEntity
    }
}

I'm seeking guidance and assistance on how to enable touch functionality on the video entity. Your insights and suggestions would be greatly appreciated. Thank you in advance for your help!