Как вернуть один конкретный элемент с помощью функции карты (JavaScript)

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

{this.state.cities.map(() =>
          this.state.cities[0].value > 10 ? (
            <p style = {{ color: "red" }}>
              {this.state.cities[0].name} - {this.state.cities[0].value}
            </p>
          ) : (
            <p>
              {" "}
              {this.state.cities[0].name} - {this.state.cities[0].value}
            </p>
          )
        )}