Encountered an issue when adding a highlight effect to an image with rounded corners.

When I display 2/3 of the poster on tvos, after setting it according to the code, some semi-transparent background can be seen in the upper left and right corners of the image when it is in focus. How can I eliminate it?

struct HighPosterView: View {
    let media: MediaDetail
    
    @State private var isShowingDetails = false
    
    @Environment(\.isFocused) private var isFocused: Bool
    
    var body: some View {
        Button {
            isShowingDetails.toggle()
        } label: {
            HighShelfImageView(imageURL: media.posterURL)
                .contentShape(RoundedRectangle(cornerRadius: 24, style: .continuous))
                .hoverEffect(.highlight)
            
            Text(media.displayTitle)
                .lineLimit(1)
                .font(.subheadline)
                .frame(maxWidth: 300)
        }
        .buttonStyle(.borderless)
        .animation(.smooth)
    }
}

struct HighShelfImageView: View {
    
    let imageURL: URL?
    
    var body: some View {
        KFImage.url(imageURL)
            .targetCache(ImageCacheManager.shelfCache)
            .setProcessor(ImageCacheManager.mediaListShelfProcessor)
            .placeholder {
                Color.primary.opacity(0.1)
                    .cornerRadius(Constants.cornerRadius)
            }
            .cancelOnDisappear(true)
            .cacheMemoryOnly(false)
            .fade(duration: 0.1)
            .cacheOriginalImage(true)
            .resizable()
            .aspectRatio(2/3, contentMode: .fill)
            .clipShape(RoundedRectangle(cornerRadius: Constants.cornerRadius))
    }
}

I need to keep the image and text distributed vertically, keep customize corner, with the text pushed aside when the image is in focus.