Ошибка в динамическом добавлении полей ввода в форму дизайна муравья

Question

Я использую форму Ant Design, у меня есть компонент, который отображает дополнительные поля. Проблема в том, что я пытаюсь использовать этот компонент в другом месте, но он показывает те же данные в другом месте, например, если ядинамически добавьте 3 поля в 1 месте, в другом месте также добавьте 3 поля.

Я использую response.js

  remove = k => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    // We need at least one
    // if (keys.length === 1) {
    //   return;
    // }

    // can use data-binding to set
    form.setFieldsValue({
      keys: keys.filter(key => key !== k),
    });
  };

  add = () => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    const nextKeys = keys.concat(id++);
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys,
    });
  };

const formItems = keys.map((k, index) => {
      const random = Math.random();
      return (
        <React.Fragment key={random}>
          <Card style={{ backgroundColor: '#f2f2f2' }}>
            <Form.Item label="Select MOC"
              key={k + 'select-moc'}
              style={{ display: 'inline-block', width: 'calc(65% - 12px)', marginRight: '10px' }}>
              {getFieldDecorator(k + 'selectMOC', {
                rules: [{ required: true, message: 'Please select MOC' }],
              })(
                <Select initialtValue="Stainless Steel">
                  <Option value="Stainless Steel">Stainless Steel</Option>
                  <Option value="Glass">Glass</Option>
                  <Option value="Teflon">Teflon</Option>
                  <Option value="Plastic">Plastic</Option>
                </Select>
              )}
            </Form.Item>
            <Form.Item label="Recovery (%)"
              key={k + 'recovery'}
              style={{ display: 'inline-block', width: 'calc(25% - 12px)', marginLeft: '10px' }}
              className='input-inLine'
            >
              {getFieldDecorator(k + 'mocRecovery', {
                rules: [{ required: true, message: 'Please input recovery percentage' }],
              })(
                <InputNumber min={0} max={100} />
              )}
              <Icon
                type="close"
                onClick={() => this.remove(k)}
              />
            </Form.Item>
            <p onClick={() => this.add()}
              style={{ width: '50%', margin: '0', marginBottom: '1em', color: 'blue' }}
            >
              Add Another
          </p>
          </Card>
        </React.Fragment>
      );
    });

Я ожидаю динамического добавления полей в 2мест.Нажатие на кнопку Добавить MOC должно добавить 1 поле в 1 месте, я рендеринг компонента в 2 местах