React array, почему это происходит?

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

Функция первого компонента:

export default class SvcList extends React.Component {
   constructor(props) {
   super(props)

   this.state = {
      servicesArr: []
   }
 }

  changeSelectionsArray = (id) => {  
    this.state.servicesArr.push(id)
    // THIS IS THE FUNCTION SENDING THE ARRAY TO SECOND COMPONENT
    this.props.reviseServicesArray(this.state.servicesArr)  
  }

  render() {
    return(
      <div><button id = "something" onClick = {() => this.changeSelectionsArray(id)}>Click Me</button></div>
    )  
  }
}

Это работает. В console.info показан вывод, который я получаю от компонента:

["5bd97355-50d8-4a06-aced-025c8cc587f3", "5bd97403-ae5b-4c90-92cb-130f86154e27"]

Поэтому я привожу этот массив ко второму компоненту через props, и когда я console.info props, я получаю точный массив, показанный выше. Вот второй компонент:

export default class SvcDisplay extends React.Component {
   constructor(props) {
   super(props)
  }     

 render() {

  const { servicesArr } = this.props;

  const serviceDisplay = servicesArr.map((item, i) => (
    <li key = {i}>{item}</li>
  ));

    return(
      <div>
        <ul>{serviceDisplay}</ul>      
      </div>  
    )  
  }
}

Выходные данные объединяются в одну пулю, например:

- 5bd97355-50d8-4a06-aced-025c8cc587f35bd97403-ae5b-4c90-92cb-130f86154e27

вместо отдельных пуль. Если я добавил эту строку во вторую функцию рендеринга компонента над функцией карты, она будет работать отлично:

const servicesArr = ["5bd97355-50d8-4a06-aced-025c8cc587f3", "5bd97403-ae5b-4c90-92cb-130f86154e27"];

Почему это происходит?????