I want to create a ring that allows me to see through it from the middle. Essentially, I want a simple ring that is hollow in the center, but I’m having trouble achieving this. Even using UI.clear doesn’t work. Here is my function

[edited]
i have added this ringEntity.components[OpacityComponent.self] = .init(opacity: 0.5)

but still when i add this components on the final object it works but for the whole ring even the borders but my goal is to execute this only in the middle mesh

func createRing(outerColor: UIColor, outerOpacity: CGFloat, outerRadius: Float, innerOpacity: CGFloat, innerRadius: Float) -> Entity {
    let outerMaterial = UnlitMaterial(color: outerColor.withAlphaComponent(outerOpacity))
    let innerMaterial = UnlitMaterial(color: UIColor.clear.withAlphaComponent(innerOpacity))

    
    let outerMesh = MeshResource.generateCylinder(height: 0.01, radius: outerRadius)
    let outerEntity = ModelEntity(mesh: outerMesh, materials: [outerMaterial])

    
    let innerMesh = MeshResource.generateCylinder(height: 0.012, radius: innerRadius)
    let innerEntity = ModelEntity(mesh: innerMesh, materials: [innerMaterial])

    
    innerEntity.components[CollisionComponent.self] = nil

    
    outerEntity.components[CollisionComponent.self] = CollisionComponent(shapes: [ShapeResource.generateBox(size: [outerRadius * 2, outerRadius * 2, 0.01])])
    outerEntity.generateCollisionShapes(recursive: true)
    outerEntity.components.set(InputTargetComponent())

    let ringEntity = Entity()
    ringEntity.addChild(outerEntity)
    ringEntity.addChild(innerEntity)

    return ringEntity
}