Как сделать проверку повторяющегося элемента в реакт?

Есть некий конструктор который должен рендерить 1 из 2 элементов, в зависимости от того что в нем находится. Так же есть массив объектов, откуда и берутся данные, условно:

 Arr [
    {name: "Red",
    type: "color"
    }
    {name: "Black",
    type: color
    }
    {
    name: '52',
    type: size
    }
    ... и т.д.
    ]

Задача заключается в том что если к примеру уже есть Red, то добавлять Black не нужно, и наоборот.

    return (
          <div className={styles.component}>
             {arr.map((obj) => {
                if (obj.type === color) {
                  return (
                    <ConstructorElementv />
                  );
                }
              })}
    </div>
    

Абсолютно не понимаю как можно это реализовать