React.cloneElement, возвращающий двойные элементы при попытке проверить дочерний элемент

Question

Я пытаюсь передать реквизиты от родительского элемента ("Section") всем дочерним элементам, пытаясь убедиться, что только элементы "Block" могут использоваться в качестве дочерних. Он отлично работает, когда я использую React.cloneElement следующим образом:

const Blocks = React.Children.map(children, child => {
      return React.cloneElement(child, {
        type: this.props.type,
      });
    });

Но когда добавьте валидацию следующим образом:

const Blocks = React.Children.map(children, child => {
      if (child instanceof Block) {
        return React.cloneElement(child, {
          ...this.props,
        });
      } else {
        console.log('not a block');
        console.log(child);
      }
    });

Контент вообще не отображается. Но когда я использую код проверки следующим образом:

const Blocks = React.Children.map(children, child => {
      if (child instanceof Block) {
        return React.cloneElement(child, {
          ...this.props,
        });
      } else {
        console.log('not a block');
        console.log(child);
      }
    });

Но когда я делаю это следующим образом, все элементы отображаются дважды / дважды:

const Blocks = React.Children.map(children, child => {
  if (child.type === Block) {
    return React.cloneElement(child, {
      ...this.props,
    });
  } else {
    console.log('not a block');
    console.log(child);
  }
});

Как выводится это изображение:

Скриншот

Я довольно новичок в этом. Не уверен, что я здесь делаю не так. Любая помощь в этом будет оценена. Thanx.