Weird problem with my custom view in SwiftUI

I am just starting to build a new app but I have already run into some weird problem. I created a custom button as a separate view. On the preview the button looks as expected:

The code for the view above looks like this:

struct LeagueSelectorButton: View {
    let text: String
    let leagueID: Int
    
    @Binding var isSelected: Bool
    
    var body: some View {
        HStack {
            leagueLogo
            leagueName
        }
        .padding(10)
        .background {
            RoundedRectangle(cornerRadius: 6)
                .stroke(isSelected ? .green : .black, lineWidth: 3)
        }
        .onTapGesture {
            isSelected.toggle()
        }
    }
    
    var leagueLogo: some View {
        AsyncImage(url: URL(string: "https://media.api-sports.io/football/leagues/\(leagueID).png")) { image in
            image
                .resizable()
                .frame(width: 35, height: 35)
        } placeholder: {
            Rectangle()
                .frame(width: 35, height: 35)
        }
    }
    
    var leagueName: some View {
        Text("\(text)")
            .bold()
            .font(.title)
    }
}

But when I use this custom button in a different view it starts to look weird as you can see. The corners are all wrong and line widths are all over the place:

The code for this view is the following:

struct GamesView: View {
    @State var isSelected = false
    
    var body: some View {
        ScrollView {
            VStack {
                ScrollView(.horizontal) {
                    HStack {
                       LeagueSelectorButton(text: "Premier League", leagueID: 39, isSelected: $isSelected)
                    }
                }
                .scrollIndicators(.hidden)
                .padding()
// ...
// other code that doesn't matter
            }
        }
    }
}

Help me out here. I don't really understand what I am doing wrong here.