Скрывать кнопки формы при изменении поля формы Ant Design

Всем доброго времени суток. Столкнулся с такой проблемой, как мне скрыть кнопки формы Ant Design. Только при условии, что какое-то значение филда изменилось.

<Form id={containerId} onSubmit={handleSubmit}>
        <FieldWrapper>
          <Form.Field
            as={Input}
            options={{
              id: 'name',
              rules: [
                {
                  required: true,
                  message: 'Enter the cost center name',
                },
              ],
            }}
            item={{
              label: 'Name',
              form,
            }}
            element={{
              size: 'large',
              disabled: costCenter.archived,
              autoFocus: true,
            }}
          />
        </FieldWrapper>
        {!isCostCenterRoot && (
          <FieldWrapper>
            <Form.Field
              as={DataSelector}
              options={{
                id: 'parentCostCenterID',
                rules: [
                  {
                    required: true,
                    message: 'Select the parent cost center',
                  },
                ],
              }}
              item={{
                label: 'Parent cost center',
                form,
              }}
              element={{
                size: 'large',
                notFoundContent: 'No cost center found',
                optionValue: 'name',
                parentId: containerId,
                disabled: costCenter.archived,
                children: filteredCostCenters,
              }}
            />
          </FieldWrapper>
        )}
        <LargeFieldWrapper>
          <Form.Field
            as={DataSelector}
            options={{
              id: 'spenderIDs',
            }}
            item={{
              label: 'Spender(s)',
              form,
            }}
            element={{
              allowClear: true,
              size: 'large',
              disabled: costCenter.archived,
              notFoundContent: 'No users found',
              mode: 'multiple',
              optionValue: 'fullName',
              children: users,
            }}
          />
        </LargeFieldWrapper>
        {!isCostCenterRoot && (
          <WrapButton>
            {costCenter.archived ? (
              <>
                <p>This cost center is currently deactivated.</p>
                <Button
                  id="reactivate-btn"
                  data-testid="reactivate-btn"
                  type="primary"
                  size="large"
                  loading={loading}
                  onClick={handleReactivate}
                >
                  Reactivate
                </Button>
              </>
            ) : (
              <Button
                id="disable-cost-center-btn"
                key="disable-cost-center-btn"
                size="large"
                type="danger"
                ghost
                onClick={onDisable}
              >
                Deactivate Cost Center
              </Button>
            )}
          </WrapButton>
        )}
        {!costCenter.archived && (
          <ActionsWrapper>
            <ActionsStyled items={actions} />
          </ActionsWrapper>
        )}
      </Form>

Кнопки которые нужно скрывать или показывать

<ActionsWrapper>
  <ActionsStyled items={actions} />
</ActionsWrapper>

Вот решение. Правда получилось немного громоздко.

<Form id={containerId} onSubmit={handleSubmit}>
        <FieldWrapper>
          <Form.Field
            as={Input}
            options={{
              id: 'name',
              rules: [
                {
                  required: true,
                  message: 'Enter the cost center name',
                },
              ],
            }}
            item={{
              label: 'Name',
              form,
            }}
            element={{
              size: 'large',
              disabled: costCenter.archived,
              autoFocus: true,
            }}
          />
        </FieldWrapper>
        {!isCostCenterRoot && (
          <FieldWrapper>
            <Form.Field
              as={DataSelector}
              options={{
                id: 'parentCostCenterID',
                rules: [
                  {
                    required: true,
                    message: 'Select the parent cost center',
                  },
                ],
              }}
              item={{
                label: 'Parent cost center',
                form,
              }}
              element={{
                size: 'large',
                notFoundContent: 'No cost center found',
                optionValue: 'name',
                parentId: containerId,
                disabled: costCenter.archived,
                children: filteredCostCenters,
              }}
            />
          </FieldWrapper>
        )}
        <LargeFieldWrapper>
          <Form.Field
            as={DataSelector}
            options={{
              id: 'spenderIDs',
            }}
            item={{
              label: 'Spender(s)',
              form,
            }}
            element={{
              allowClear: true,
              size: 'large',
              disabled: costCenter.archived,
              notFoundContent: 'No users found',
              mode: 'multiple',
              optionValue: 'fullName',
              children: users,
            }}
          />
        </LargeFieldWrapper>
        {!isCostCenterRoot && (
          <WrapButton>
            {costCenter.archived ? (
              <>
                <p>This cost center is currently deactivated.</p>
                <Button
                  id="reactivate-btn"
                  data-testid="reactivate-btn"
                  type="primary"
                  size="large"
                  loading={loading}
                  onClick={handleReactivate}
                >
                  Reactivate
                </Button>
              </>
            ) : (
              <Button
                id="disable-cost-center-btn"
                key="disable-cost-center-btn"
                size="large"
                type="danger"
                ghost
                onClick={onDisable}
              >
                Deactivate Cost Center
              </Button>
            )}
          </WrapButton>
        )}
        {!costCenter.archived && !isEmpty(form.getFieldsValue()) &&
          !isEqual(matchCostCenter, form.getFieldsValue()) && (
            <ActionsWrapper>
              <ActionsStyled items={actions} />
            </ActionsWrapper>
          )}
      </Form>