Concentric corners not working

I want the gray view to have concentric corners with the device border. That works. Then I want the blue rectangle to have concentric corners with the gray view. That does not work. Instead the blue rectangle is also concentric with the device border. Once I add other content like a Text element, the corner radius breaks.

How can I make this work? .containerShape does not take a ConcentricContainerShape.

struct ContentView: View {
    var body: some View {
        List {
            Text("Content")
        }
        .overlay(alignment: .bottom) {
            content
        }
        .ignoresSafeArea(.all, edges: .bottom)
    }
    
    var content: some View {
        VStack(alignment: .leading) {
            Rectangle()
                .foregroundStyle(.blue)
                .frame(width: 100, height: 100)
                .clipShape(.rect(corners: .concentric, isUniform: true))
            
            Text("Custom Container")
        }
        .padding(20)
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(Color.gray, in: .rect(corners: .concentric, isUniform: true))
        .padding(15)
    }
}