How to get scribble input in SwiftUI for WatchOS6

I'm trying to make it so that when the user clicks on the button that has the comment inside it it will pop up with a scribble user input and dictation. I looked at some other solution, but I wasn't able to get any of them to work. I think it might be because they were all suggestions for implementation in watchOS3. I also looked in the apple documentation and found this https://developer.apple.com/documentation/watchkit/wkinterfacecontroller/1619527-presenttextinputcontroller, but I wasn't able to get it to work. I have my full code below

import SwiftUI
import Foundation

struct ContentView: View {
    @State var counterValues = [0,0,0, -1, -1, -1, -1, -1, -1, -1 ]
    @State var counterNames = ["Pullups", "Pushups", "Situps", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
    @State var counters = 3;

    var body: some View {
       ScrollView {       
            VStack {
                ForEach( counterValues.indices ) { index in
                    if (self.counterValues[index]>=0) {
                        Text("\(self.counterNames[index])")
                        Button(action: {
                            self.counterValues[index] += 1
                        }) {
                            Text("\(self.counterValues[index])")
                                .font(.title)
                                .multilineTextAlignment(.center)
                        }
                    }
                }

                Button(action: {                   
                       //Add user input here
                }) {
                    Image(systemName: "plus")
                        .font(.largeTitle)
                        .foregroundColor(.green)
                }
                .cornerRadius(40)
                    .shadow(color: .gray, radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/ )
                    .padding(20)

            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

And this is the specific button that when clicked I want to have it allow for user input and then store that input in a variable

                Button(action: {
                    //Add user input here
                }) {
                    Image(systemName: "plus")
                        .font(.largeTitle)
                        .foregroundColor(.green)
                }
                .cornerRadius(40)
                    .shadow(color: .gray, radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/ )
                    .padding(20)

You may try the following code with textfield.

           struct ContentView: View {

            @State
               var counterValues = [0,0,0, -1, -1, -1, -1, -1, -1, -1 ]
               @State var counterNames = ["Pullups", "Pushups", "Situps", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
               @State var counters = 3;
               @State var textInput = "";
               @State var showInput = false;
               var body: some View {



                   ScrollView {


                       VStack {



                           ForEach( counterValues.indices ) { index in
                               if (self.counterValues[index]>=0) {

                           Text("\(self.counterNames[index])")
                           Button(action: {
                               self.counterValues[index] += 1
                           }) {
                               Text("\(self.counterValues[index])")
                               .font(.title)
                               .multilineTextAlignment(.center)
                           }
                               }
                       }

                           Button(action: {


                                  //Add user input here
                            self.showInput.toggle()

                               }) {
                                   Image(systemName: "plus")
                                   .font(.largeTitle)
                                   .foregroundColor(.green)


                               }
                               .cornerRadius(40)

                           .shadow(color: .gray, radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/ )

                           .padding(20)
                        if self.showInput{
                            TextField.init("input", text: $textInput)}

                    }
               }
               }
            }