Map produces weird bottom inset in SwiftUI 15

Question

When I tap to the MapView there is this weird inset which looks like a tabBar. Also when I tap around in the my custom tabBar sometimes you can see the default Apple tabBar for the split of a few seconds even though I purposely hid it. The weird thing is I use a very similar code in another app and it works just fine.

struct MainTabbedView: View {
    
    @State var selectedTab = 0
    
    var body: some View {
        TabView(selection: $selectedTab) {
            CreatorView()
                .tag(0)
                .toolbar(.hidden, for: .tabBar)
            
            MapView()
                .tag(1)
                .toolbar(.hidden, for: .tabBar)
            
            RemindersView()
                .tag(2)
                .toolbar(.hidden, for: .tabBar)
            
            SettingsView()
                .tag(3)
                .toolbar(.hidden, for: .tabBar)
        }
        .overlay(alignment: .bottom) {
            HStack {
                ForEach((TabbedItems.allCases), id: \.self) { item in
                    Button {
                        selectedTab = item.rawValue
                    } label: {
                        CustomTabItem(image: item.icon, imageName: item.iconName, title: item.title, isActive: (selectedTab == item.rawValue))
                    }
                }
            }
            .padding(6)
            .frame(height: 60)
            .background(Color.alleRausPrimary.opacity(0.3))
            .background(.ultraThinMaterial)
            .cornerRadius(35)
            .padding(.horizontal, 26)
        }
    }
    
    @ViewBuilder
    func CustomTabItem(image: SFSymbol, imageName: String, title: String, isActive: Bool) -> some View {
        
        let iconWidth: [String: CGFloat] = [
            "plus.circle.fill": 24,
            "mappin.and.ellipse": 19,
            "bell.badge": 19,
            "gearshape": 20
        ]
        
        let iconHeight: [String: CGFloat] = [
            "plus.circle.fill": 24,
            "mappin.and.ellipse": 23,
            "bell.badge": 22,
            "gearshape": 20
        ]
        
        HStack(spacing: 10) {
            Spacer()
            
            Image(systemSymbol: image)
                .resizable()
                .renderingMode(.template)
                .frame(width: iconWidth[imageName], height: iconHeight[imageName])
                .foregroundColor(isActive ? .white.opacity(0.9) : Color.alleRausPrimary)
            
            // Display title only if the tab is currently active
            if isActive {
                Text(title)
                    .font(.system(size: 12))
                    .minimumScaleFactor(0.7)
                    .lineLimit(1)
                    .foregroundColor(.white)
            }
            Spacer()
        }
        .frame(minWidth: 60, maxWidth: isActive ? .infinity : 60)
        .frame(height: 50)
        .background(isActive ? Color.alleRausPrimary.opacity(0.9) : .clear)
        .cornerRadius(30)
    }
}

import SFSafeSymbols

/// An enumeration representing the different tabs in the app.
enum TabbedItems: Int, CaseIterable {
    
    /// Represents the "Creator" tab.
    case creator = 0
    /// Represents the "Map" tab.
    case map
    /// Represents the "Reminders" tab.
    case reminders
    /// Represents the '"Settings"' tab.
    case settings
    
    /// The title associated with each tab, localized for internationalization.
    var title: String {
        switch self {
        case .creator:
            return "Creator"
        case .map:
            return "Map"
        case .reminders:
            return "Reminders"
        case .settings:
            return "Settings"
        }
    }
    
    var iconName: String {
        switch self {
        case .creator:
            return "plus.circle.fill"
        case .map:
            return "mappin.and.ellipse"
        case .reminders:
            return "bell.badge"
        case .settings:
            return "gearshape"
        }
    }
    
    /// The system name of the SF Symbol associated with each tab.
    var icon: SFSymbol {
        switch self {
        case .creator:
            return .plusCircleFill
        case .map:
            return .mappinAndEllipse
        case .reminders:
            return .bellBadge
        case .settings:
            return .gearshape
        }
    }
}

@State var position: MapCameraPosition = .userLocation(fallback: .automatic)
    
    var body: some View {
        Map(position: $position) {
            UserAnnotation()
        }
        .mapControls {
            MapUserLocationButton()
            MapCompass()
            MapScaleView()
            MapPitchToggle()
        }
    }