List in DisclosureGroup uses more height than number of items

I am trying to populate a right sidebar in my macOS app. And like in Xcode, I would like to use disclosure groups.

This is my first attempt:

import SwiftUI

struct TestView: View {
    var items1: [String] = ["One", "two", "three"]
    var items2: [String] = ["Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"]

    var body: some View {
        DisclosureGroup("one") {
            List(items1, id: \.self) { item in
                Text(item)
            }
        }
        .padding()

        DisclosureGroup("two") {
            List(items2, id: \.self) { item in
                Text(item)
            }
        }
        .padding()

        Spacer()
    }
}

What happens when I click the first chevron, it pushes the second list all the way to the bottom of the view, even though there are only three items in the first list. Adding a Spacer did not help.

Screenshot:

How do I make the list in the first disclosure group only occupy the amount of three rows?

Of course, soon after, I found a solution, I shouldn't use a DisclosureGroup but expandable Sections and .listStyle(.sidebar):

struct TestView: View {
    @State private var isExpandedOne: Bool = false
    @State private var isExpandedTwo: Bool = false

    var items1: [String] = ["One", "two", "three"]
    var items2: [String] = ["Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"]

    var body: some View {
        List {
            Section(isExpanded: $isExpandedOne, content: {
                ForEach(items1, id: \.self) { item in
                    Text(item)
                }
            },
            header: {
                Text("One")
            })
            Section(isExpanded: $isExpandedTwo, content: {
                ForEach(items2, id: \.self) { item in
                    Text(item)
                }
            },
            header: {
                Text("Two")
            })
        }
        .listStyle(.sidebar)
    }
}

Result: