How to MatchedGeometryEffect between View and Sheet?

Question

I'm trying to create a miniplayer transition in a clean way (like in apple music, podcast). I know there are ways to do it without using .sheet but that does not feel like the tidiest way. How do we create transitions to the .sheet?

struct ContentView: View {
@State var presentMusic:Bool = false
@Namespace var namespace

var body: some View {
    VStack {
        Spacer()
        HStack {
            MiniMusic(namespace: namespace)
                .onTapGesture { presentMusic.toggle() }
                .sheet(isPresented: $presentMusic, content: {
                    FullMusic(namespace: namespace)
                })
        }
    }
    .background(Color.blue)
    .ignoresSafeArea()
    }
}

Then the other structs look like this:

    struct FullMusic: View {
    var namespace:Namespace.ID
    
    var body: some View {
        VStack {
            VStack {
                Rectangle()
                    .fill(Color.yellow)
                    .frame(width:140,height: 140)
                    .matchedGeometryEffect(id: "rectangle", in: namespace)
                Text("Full Music")
                    .matchedGeometryEffect(id: "text", in: namespace)
            }
            .animation(.easeIn)
        }
    }
    
}

struct MiniMusic: View {
    var namespace:Namespace.ID

    var body: some View {
        HStack {
            Rectangle()
                .fill(Color.yellow)
                .frame(width:32,height: 32)
                .matchedGeometryEffect(id: "rectangle", in: namespace)
            Text("Hello, world!")
                .padding()
                .matchedGeometryEffect(id: "text", in: namespace)
            Spacer()
        }
        .padding()
        .frame(height:44)
        .background(Color.pink.opacity(0.5))

    }
}

Lefthand

Did you end up figuring this out @Pbk? – Shopper

Still interested in this if anyone has found a solution? – Filomena