Как функционально загрузить новые данные для нескольких компонентов React

Я настоящий новичок в React / ES6, поэтому мой вопрос довольно прост.

Как функционально обновить несколько графиков Highcharts с помощью нескольких извлеченных данных - графики теперь отображаются в одно и то же время с одним и тем же интервалом извлечения данных.

Итак, вопрос: как вызвать функцию getData столько раз, сколько нужно отрисовать компонент, чтобы каждый график имел собственные данные.

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'


const options = {
   table: 'Chart 1',
   chart: {
     type: 'line',
     zoomType: 'xy'
   },
   title: {
     text: 'Chart 1'
   },
   series: [{
     data: []
   }]
 }


 const Value = () =>
   <p>{options.series[0].data[options.series[0].data.length-1]}</p>

 const Highchart = () => 
   <HighchartsReact
     highcharts = {Highcharts}
     options = {options}
     updateArgs = {[true, true, true]}
   />

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {counter: null};
  }

  render() {
    if (this.state.counter) {
      return (
        <Counter 
          counter = {this.state.counter}
          onExit = {() => this.setState({counter:null})}
        />
      )
    } else {
      return (
        <div>
          <h2>Pick a Counter</h2>
          <button onClick = {() => this.setState({counter:'simplest'})}  >Run</button><br/>
        </div>
      )
    }
  }
}

const getData = (opt) => {
  const Url = 'http://80.211.209.99/randArray.php';
  fetch(Url)
  .then(data=>{
    return data.json()
  })
  .then(res=>{
    options.series[0].data = res;
    opt.setState({number: opt.state.number + 1});
    console.info(options);
  })
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {number: 0};
  }
  componentDidMount() {
    this.interval = setInterval(() => {
      console.info(this.state.number, this.props.counter)
      getData(this);
    }, 3000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        <h1>{this.state.number}</h1>
        <button onClick = {this.props.onExit}>Exit</button>
        <div className = "tableDiv">
          <div className = "chartDiv">
            <Highchart />
            <Value />
          </div>
          <div className = "chartDiv">
            <Highchart />
            <Value />
          </div>
          <div className = "chartDiv">
            <Highchart />
            <Value />
          </div>
          <div className = "chartDiv">
            <Highchart />
            <Value />
          </div>
          </div>
      </div>
    )
  }
}
render(<App/>, document.getElementById('root'))