Handling multi select using ReactJS

main.js

import React, { Component } from 'react';

class App extends Component {

  state = {
    elementos: ['1', '2']
  }

  componentDidMount () {
    console.log('carregado: ', this.state.elementos);
  }

  handleMultiSelect = event => {
    let options = event.target.options;
    let value = [];
    for (let i = 0, l = options.length; i < l; i++) {
      if (options[i].selected) {
        value.push(options[i].value);
      }
    }
    console.log('escolhido: ', value);
    this.setState({
      elementos: value
    });
  }

  render () {
    return (
      <div className="App">
        <header className="App-header">
          
          <form>
  
            <select value={this.state.elementos} onChange={this.handleMultiSelect} multiple={true} name="lista" size={5}>
              <option value="0">ZERO</option>
              <option value="1">UM</option>
              <option value="2">DOIS</option>
              <option value="3">TRES</option>
              <option value="4">QUATRO</option>
            </select>
  
          </form>
  
        </header>
      </div>
    );
  }
}

export default App;