SwiftUI header like datepicker above List - swiftui

Question

I want to create a List view with SwiftUI with a sticky component on the top that is outside of the List.
An example of what i want to achieve is on the bottom.
I tried placing the component inside the List as first item but it will be put inside a list item. and just hides a big part of the component
var body: some View {
List {
WeekHeader()
.environmentObject(weekStore)
DayView(
date: weekStore.currentDate,
showAddingWorkout: $showAddingWorkout,
isEditing: isEditing
)
}
.listStyle(.insetGrouped)
}
I tried placing a List inside a VStack with the component before the List which just splits the view in 2 with a List really small on the bottom.
var body: some View {
VStack {
WeekHeader()
.environmentObject(weekStore)
List {
DayView(
date: weekStore.currentDate,
showAddingWorkout: $showAddingWorkout,
isEditing: isEditing
)
}
.listStyle(.insetGrouped)
}
}
And my last attempt with 'looks' like what i want to achieve but its placed inside the navigation bar and the height of the bar doesn't grow with it so the bottom row of the component couldn't be interacted with.
var body: some View {
NavigationView {
List {
DayView(
date: weekStore.currentDate,
showAddingWorkout: $showAddingWorkout,
isEditing: isEditing
)
}
.listStyle(.insetGrouped)
.toolbar {
ToolbarItemGroup(placement: .principal) {
WeekHeader()
.environmentObject(weekStore)
}
}
}
}
This is the component i want to add above the list
And i want my list to look like a default list.
Please let me know if i need to elaborate my question or provide more code.