Issue with Keyboard Avoidance for Sheet View in SwiftUI

I am currently working on a comments section modeled after TikTok's/Instagram's comment sections for a media app. The view is a sheet view that is presented as follows:

.sheet(isPresented: $showChat) {
                TakesChatView(viewModel: viewModel)
                    .presentationDetents([.medium, .large])
                    .presentationDragIndicator(.hidden)
                    .overlay(
                        VStack {
                            RoundedRectangle(cornerRadius: 2)
                                .fill(Color.gray)
                                .frame(width: 40, height: 5)
                                .padding(.top, 15)
                                .opacity(0.8)
                            Label("Chat", systemImage: "message.badge")
                                .lineLimit(nil)
                                .padding(.top, 5)
                                .padding([.leading, .trailing], 16)
                            Divider()
                                .padding(.top, 5)
                                .padding([.leading, .trailing], 16)
                            Spacer()
                        }
                            .frame(maxWidth: .infinity, alignment: .top)
                    )
            }.ignoresSafeArea(.keyboard, edges: .bottom)

However, some issues arise regarding keyboard avoidance. Currently, when the user taps on the TextField to type a comment, the keyboard shifts the entire view upwards as it pops up. Instead, I need it where I can still view the comments without the keyboard affecting their placement when it pop up.

Below is the associated code for the comment view:

struct TakesChatView: View {
    
    @ObservedObject var viewModel: TakeCommentViewModel
    @FocusState var focus: Bool
    @State private var selectedMedia: [PhotosPickerItem] = []
    @State private var selectedImageData: [Data] = []
    @State private var selectedGIFData: [Data] = []
    @State private var selectedVideoData: [Data] = []
    
    var textFieldNotEmpty: Bool {
        !viewModel.textToPost.isEmpty ||
        !selectedImageData.isEmpty ||
        !selectedGIFData.isEmpty ||
        !selectedVideoData.isEmpty
    }
    
    var body: some View {
        GeometryReader { _ in
            ZStack {
                VStack {
                    contentView
                    commentTextField
                        .padding(.top,5)
                }
            }
        }
        .ignoresSafeArea(.keyboard, edges: .bottom)
        .background(Color.containerBackground)
        .onChange(of: viewModel.focus) { focus in
            self.focus = focus
        }
        .onChange(of: selectedMedia) { _ in
            loadMedia()
        }
    }
    
    var contentView: some View {
        VStack {
            Spacer().frame(height: 105)
            ScrollViewReader { scroll in
                ScrollView(showsIndicators: true) {
                    ForEach(viewModel.comments, id: \.self) { comment in
                        TakeCommentView(
                            comment: comment,
                            viewModel: self.viewModel
                        )
                        .padding(.horizontal, 10)
                        .id(comment.documentID)
                    }
                    .onChange(of: viewModel.commentAdded) { id in
                        scroll.scrollTo(id, anchor: .bottom)
                        viewModel.commentAdded = nil
                    }
                }
                .scrollDismissesKeyboard(.immediately)
            }
        }
    }
}
 
extension TakesChatView {
    var commentTextField: some View {
        VStack {
            mediaPreview
            HStack {
                TextField("Type your comment", text: $viewModel.textToPost, axis: .vertical)
                    .keyboardType(.twitter)
                    .padding([.leading, .vertical], 6)
                    .focused($focus)
                
                PhotosPicker(selection: $selectedMedia, matching: .any(of: [.images, .videos]), photoLibrary: .shared()) {
                    ComposeType.media.image
                        .frame(width: 40, height: 40, alignment: .center)
                }
                .onAppear {
                    selectedMedia.removeAll()
                    selectedImageData.removeAll()
                    selectedGIFData.removeAll()
                    selectedVideoData.removeAll()
                }
                
                postButton
            }
            .border(.lightGray, width: 1, cornerRadius: 10)
            .padding([.bottom, .horizontal], 10)
        }
    }
}

I have tried using .ignoresSafeAres(), .safeAreaInset(), and custom keyboard observer functions but to no avail. How do I fix this issue?