Keyboard pushes Custom TabBar Up

Hello, so I created a custom TabBar using the .overlay modifier on TabView. However, when clicking/pressing on a TextField, the keyboard causes the TabBar to be pushed up in the view. From Reddit, I found that this is caused by using the .overlay modifier.

How should I go about fixing this issue or what is the standard way of implementing custom tab bars?

Thanks in advance!

-- Kohl J

Screenshot

TabView Code

struct RootView: View {
    
    @State var selectedTab : Tabs = .home;
    
    var body: some View {        
        TabView(selection: $selectedTab) {
            HomeView(selectedTab: $selectedTab)
                .tag(Tabs.home)
            TaskListView(selectedTab: $selectedTab)
                .tag(Tabs.taskList)
            CreateTaskView(selectedTab: $selectedTab)
                .tag(Tabs.create)
            TrophiesView(selectedTab: $selectedTab)
                .tag(Tabs.trophies)
            SettingsView(selectedTab: $selectedTab)
                .tag(Tabs.settings)
        }
        .overlay(alignment: .bottom) {
            TabBar(selectedTab: $selectedTab)
                .padding(.horizontal)
        }
    }
}

Custom TabBar Code

struct TabBar: View {
    @Binding var selectedTab : Tabs
    
    var body : some View {
        HStack (alignment: .center) {
            Button(action: {
                // switch to home view
                selectedTab = Tabs.home
            }, label: {
                TabBarButton(buttonText: "Home", imageName: "house.fill", size: 24, isActive: selectedTab == .home, hasTopBar: true)
            })
            
            Button(action: {
                // switch to task list view
                selectedTab = Tabs.taskList
            }, label: {
                TabBarButton(buttonText: "Task List", imageName: "list.bullet.clipboard.fill", size: 24, isActive: selectedTab == .taskList, hasTopBar: true)
            })
            
            Button(action: {
                // switch to create view
                selectedTab = Tabs.create
            }, label: {
                TabBarButton(buttonText: "Create", imageName: "plus.circle.fill", size: 32, isActive: selectedTab == .create, hasTopBar: false)
            })
            
            Button(action: {
                // switch to trophies view
                selectedTab = Tabs.trophies
            }, label: {
                TabBarButton(buttonText: "Trophies", imageName: "trophy.fill", size: 24, isActive: selectedTab == .trophies, hasTopBar: true)
            })
            
            Button(action: {
                // switch to settings view
                selectedTab = Tabs.settings
            }, label: {
                TabBarButton(buttonText: "Settings", imageName: "gearshape.fill", size: 24, isActive: selectedTab == .settings, hasTopBar: true)
            })
        }
        .frame(height: 60)
    }
}