ios – ScrollView is not starting from beginning nor reaching end of list

I have an IOS app, where I have 2 lists, that I am displaying on the screen, basically a vertical scrollview, inside of it a horizontal scrollview with 2 lists:

Vertical ScrollView:

• Horizontal ScrollView:

  1. SampleProfileView

  2. SampleProfileViewB

Component 1:

@ViewBuilder
func SampleProfileView() -> some View{
    var arrayData: [Int] = Array(1…50);
    LazyVStack{
        Text("About")
            .font(.custom("PlayfairDisplay-Bold", size: 25))
            .fontWeight(.bold)
            .frame(maxWidth: .infinity, alignment: .leading)
            .foregroundColor(.black)
            .padding(.horizontal)
        
        VStack{
            ForEach(arrayData, id: \.self){item in
                ZStack{
                    RoundedRectangle(cornerRadius: 15)
                        .fill(color.gradient)
                    //                        .frame(height: 100)
                    
                    Text("\(item)")
                        .font(.custom("PlayfairDisplay-Bold", size: 30))
                        .foregroundColor(.black)
                        .fontWeight(.bold)
                        .padding(.horizontal)
                }
                
            }
        }
    }
    
}

Here is Component 2:

@ViewBuilder
func SampleProfileViewB() -> some View{
    var arrayData: [Int] = Array(1…50);
    LazyVStack{
        Text("About")
            .font(.custom("PlayfairDisplay-Bold", size: 25))
            .fontWeight(.bold)
            .frame(maxWidth: .infinity, alignment: .leading)
            .foregroundColor(.black)
            .padding(.horizontal)
        
        VStack{
            ForEach(arrayData, id: \.self){item in
                ZStack{
                    RoundedRectangle(cornerRadius: 15)
                        .fill(color.gradient)
                    //                        .frame(height: 100)
                    
                    Text("\(item)")
                        .font(.custom("PlayfairDisplay-Bold", size: 30))
                        .foregroundColor(.black)
                        .fontWeight(.bold)
                        .padding(.horizontal)
                }
                
            }
        }
    }
    
}

I am using both components in the following Main View component:

    NavigationStack{
        ScrollView(.vertical){
            LazyVStack{
                TopProfileHeaderView()
                
                
                ScrollView(.horizontal){
                    LazyHStack{
                        
                        SampleProfileView()
                            .id(0)
                            .containerRelativeFrame(.horizontal)
                        
                        
                        SampleProfileViewB()
                            .id(1)
                            .containerRelativeFrame(.horizontal)
                       
                    }
                    
                    
                }
                .scrollIndicators(.visible)
                .scrollTargetBehavior(.paging)
                .scrollTargetLayout()
            }
            
        }
    }

Image 1: As you can see in the first image, at the top, it does not start from the beginning of the list (ie. 0, 1, 2, 3, 4, 5), it does not scroll up to the start of the list.

Image 2: In the second image, you can see that when I scroll, it does not reach the end of the list (last number is 50 in the list).

Screenshots:

image_1
image_2

My Question:

My question is, what is preventing the list from being full height and reaching the first item in the list and the last item in the list.

Is there something wrong with my code?

Appreciate your feedback.
Thanks.