单击按钮在组件之间切换

Question

我的应用程序允许用户在表单内添加数据，然后保存并获取值。另外，我有一个动态表单，用户可以在其中添加他想要的字段数。我必须以动态形式在每种形式之间切换。应切换的组件。因此，当用户单击“提交”按钮时，应该会出现该组件，并且当该组件将出现时，用户可以切换回单击状态，回到默认模式按钮。
应用程序的想法：用户单击“添加”字段，然后单击“将字段添加到内部”，然后填充输入。在那之后点击内部提交按钮，那之后应该出现带有输入数据的组件。当用户单击返回默认模式时，应显示默认模式。

<Form.List onFinish={onFinish} name={[props.fieldKey, "inner"]}>
      {(fields, { add, remove }) => {
        return (
          <div>
            {fields.map((field, index) =>
              !fieldsOnEdit.includes(index) && defaultMode === true ? (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Form.Item
                    {...field}
                    name={[field.name, "first"]}
                    fieldKey={[field.fieldKey, "first"]}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item>
                    <Button type="primary" htmlType="submit">
                      Submit inner{setFieldOnEdit(index)}
                    </Button>
                  </Form.Item>
                </Space>
              ) : (
                <Edit value={formVal} mode={setDefaultMode} keyForm={index} />
              )
            )}

            <Form.Item>
              <Button
                type="dashed"
                onClick={() => {
                  add();
                }}
                block
              >
                <PlusOutlined /> Add field to inner
              </Button>
            </Form.Item>
          </div>
        );
      }}
    </Form.List>

问题：如何实现我所描述的？
演示：https://codesandbox.io/s/wonderful-ives-o81ue?file=/SubForm.js