How can I fix the sliding animation artifact when toggling bold text in a dropdown list?

I have a recursive dropdown list where selecting an item expands a sublist (for instance, selecting a color shows fruits of that color). I simplified my setup to illustrate an animation problem: when a color is selected, its text becomes bold, but the animation causes an artifact where the non-bold text slides into the bold layout.

The crucial part of my code overlays a bold version of the text on a regular version and adjusts their opacities based on selection. In my full app, text lengths vary and the layout is more constrained, but I suspect this overlay approach is triggering the issue. Here’s the relevant snippet:

SWIFTCopied
Text(model.title)
    .fontWeight(.bold)
    .foregroundStyle(Color.black.opacity(isSelected ? 1 : 0))
    .overlay(alignment: .center) {
        Text(model.title)
            .fontWeight(.regular)
            .opacity(isSelected ? 0 : 1)
    }
    .padding()
    .id(model.title)

When I slow down the selection animation (for example, when selecting "purple"), the bold version is positioned correctly while the regular version appears to slide into place, causing a noticeable artifact. I tried stabilizing the layout with a fixed id, but the problem persists.

Below is the rest of the relevant code for context:

SWIFTCopied
struct RowContent: Hashable, Comparable, Identifiable {
    var id: String {
        return title
    }
    var color: Color = .gray
    var title: String
    var children: [RowContent]?

    static func < (lhs: RowContent, rhs: RowContent) -> Bool {
        lhs.id < rhs.id
    }
}

struct ContentView: View {

    let models: [RowContent] = [
        RowContent(color: Color.red, title: "Red", children: [RowContent(title: "Apple"), RowContent(title: "Cherry"), RowContent(title: "Beet"), RowContent(title: "Pomegrante"), RowContent(title: "Strawberry")]),
        RowContent(color: Color.purple, title: "Purple", children: [RowContent(title: "Grape")]),
        RowContent(color: Color.blue, title: "Blue", children: [RowContent(title: "Blueberry"), RowContent(title: "Elderberry")]),
        RowContent(color: Color.yellow, title: "Yellow", children: [RowContent(title: "Yuzu"), RowContent(title: "Lemon")])
    ]

    @State var selectedRow: RowContent? = nil

    var body: some View {
        ScrollView {
            ModelList(models: models, selectedRow: $selectedRow)
                .padding()
        }
    }
}

struct RowView: View {
    @Binding var selectedRow: RowContent?
    var model: RowContent

    var isSelected: Bool {
        selectedRow == model
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack(spacing: 18) {
                Text(model.title)
                    .fontWeight(.bold)
                    .foregroundStyle(Color.black.opacity(isSelected ? 1 : 0))
                    .overlay(alignment: .center) {
                        Text(model.title)
                            .fontWeight(.regular)
                            .opacity(isSelected ? 0 : 1)
                    }
                    .padding()
                    .id(model.title)
                Spacer()
            }
            .frame(minHeight: 48)
            .background(model.color)
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .onTapGesture {
                withAnimation(.easeInOut(duration: 0.3)) {
                    if isSelected {
                        selectedRow = nil
                    } else {
                        selectedRow = model
                    }
                }
            }

            if let children = model.children, isSelected {
                ModelList(models: children, selectedRow: $selectedRow)
                    .padding(.leading, 10)
            }
        }
    }
}

struct ModelList: View {
    var models: [RowContent]
    @Binding var selectedRow: RowContent?

    var body: some View {
        LazyVStack {
            ForEach(models.sorted()) { model in
                RowView(selectedRow: $selectedRow, model: model)
            }
        }
    }
}

I'm looking for techniques to prevent the layout from recalculating in a way that causes this sliding effect. Suggestions such as fixing the intrinsic size or decoupling the animated property from layout changes would be welcome!