SwiftUI tabview changes when made scrollable

Question

I have set up a tabview as shown below

 var body: some View {
        TabView(selection: $selection){
            BookingView()
                .tabItem{
                    selection == 0 ? Image("bookReaderGreen") :Image("bookReaderDark")
                }
                .tag(0)
            ScriptsView()
                .tabItem{
                    selection == 1 ? Image("storeGreen") :Image("storeDark")
                }
                .tag(1)
            SettingsView(signInSuccess: $signInSuccess)
                .tabItem{
                    selection == 2 ? Image("cogGreen") :Image("cogDark")
                }
                .tag(2)
                
        }
//        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
    }

it works as implemented however when I include the line .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always)) the view is displayed differently.

not-scrollable (want it to look like this):

Scrollable (changes images and collapses them together):

Is there any way of keeping the scrolling between the views functionality and my default images?