how to use custom component in schema feild

[rajath-dixit-mpf]

We configured a form with the combination of form fields and form array using Markup Schema. We are trying to use custom Input component instead of Antd Input component for one of the FieldArray fields. But the problem is we are able to use our custom input component but onchange event is not updating the form field values.
Below is the SchemaField array,

 <SchemaField.Array
              name={answerId}
              x-component="Answers"
              x-component-props={{ questionType: props.type }}
            >
              <SchemaField.Object>
                <SchemaField.Void
                  x-component="FormGrid"
                  x-component-props={{
                    maxColumns: 3,
                    minColumns: 2,
                  }}
                >
                  <SchemaField.String
                    name={answerTextId}
                    title="Answer Text"
                    x-decorator={FormItem}
                    required={true}
                    x-decorator-props={{ gridSpan: 2 }}
                    x-component="AppInput"
                    x-component-props={{
                      name: answerTextId,
                      title: "Answer Text",
                      onAppChange: (e) => {
                        console.log(e, props);
                      },
                      children: (
                        <AppIconCross
                          slot="icon-end"
                          aria-label="Clear icon"
                          onClick={() => {
                            props.handleClearField(answerTextId);
                          }}
                        />
                      ),
                    }}
                  />
         
                </SchemaField.Void>
        
              </SchemaField.Object>
            </SchemaField.Array>

In the above code the onchange event from the library I am using for textbox is onAppChange =() => {}. If we type the characters in input field(AppInput) the form field values are not updating. Can you please help how can i update the form field from onAppChange event. Can you atleast help me to get the Index of form array component here.

Below is the Answers component,

   <div>
        {props.value &&
          props.value?.map((item, index) => {
            return (
              <div key={index} style={{ marginBottom: 10 }}>
                <Space>
                  <QuestionTypeSection
                    questionType={props.questionType}
                  ></QuestionTypeSection>
                  <RecursionField schema={schema.items} name={index} />
                  {props.questionType !== "free-text" ? (
                    <Button
                      shape="circle"
                      icon={<AppIconTrash />}
                      onClick={() => {
                        //field.remove(index);
                        field.value.splice(index, 1);
                        field.value = field.value.map((v, index) => {
                          return { ...v, ans_sequence: index + 1 };
                        });
                      }}
                    ></Button>
                  ) : null}
                </Space>
              </div>
            );
          })}
        {props.questionType !== "free-text" ? (
          <Button
            icon={<AppIconPlusCircle />}
            onClick={() => {
              field.push({ ans_sequence: field.value.length + 1 });
            }}
          ></Button>
        ) : null}
      </div>