react-three-renderer : can't change the number of vertices.

demo.js

import React, { Component } from 'react';
import {render} from 'react-dom';
import React3 from 'react-three-renderer';
import THREE from 'three';

const DemoView = (props) => {

  const vertices = [];
  const {nbItems} = props;
  const step = 10 / nbItems;

  for (let n=0; n<nbItems; n++) {
    vertices.push(new THREE.Vector3(-4+step*n, 0, 0));
  }

  return (
    <React3 mainCamera="camera" width={200} height={100}>
      <scene>

        <perspectiveCamera name="camera" fov={75} aspect={2} near={1} far={5}
          position={new THREE.Vector3(0, 0, 4)}
          />

        <points>
          <pointsMaterial size={0.8} color = "#DDEEDD" />
          <geometry vertices={vertices} />
        </points>

      </scene>
    </React3>
  );

}

class Demo extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {nbItems: 6};
  }

  render() {

    return (
      <div>
        <DemoView nbItems={this.state.nbItems}/>
        <input style={{display:'block'}} type='number' 
          defaultValue={this.state.nbItems} 
          onChange={(e) => this.setState({nbItems:parseInt(e.target.value)})}
          />
      </div>
      )

  }
}

render(<Demo />, document.body);