I want to achieve the following behavior. I need a list, but each row can have a leading and a trailing element. I tried to do it using overlay, but the List Row cuts off the overlay. Here is an example:

GeometryReader { geo in
    List {
        Text("Test 1")
        .overlay {
     Image(systemName: "info.circle")
      .offset(x: -50)
     }
    Text("Test 2")
    Text("Test 3")
  }
.padding(.horizontal, geo.size.width * 0.1)

In the example, the i icon should be on the left of the first row, but is hidden. Is there any way how the overlay can be made visible or another way to achieve what I want to do?

Here is an image that shows a figma mockup:

Figma Mockup

I already tried to put a list next to my list, but the obviously the elements leading and trailing the rows are not scrolling synchronously. I also tried to change the clip behavior with the clipShape property. But this just clipped the whole list, not each row. Applying it to a single row, however, does not work either.

One obvious solution would be to build my own list using ScrollView. However, I want to wrap the rows in sections and have the list style from Apple, rebuilding it would be too much work for a simple list.