I'm trying to dynamically create react.vis LineSeries but the LineSeries is inserted after and are empty

Question

I'm trying to change my charts so they iterate and load an arbitrary number of present series data into its chart in react-vis. I decided to use this.props.children, but the <LineSeries /> is inserted after the end of the svg, even though {this.props.children} is inside </XYPlot> when inspecting the html/js inside the browser

Have I taken the wrong approach, I'm very new to both react (14 days), and react-vis (6 days), is there a fix or a better way?

Note, the code is in the middle of refactoring/transition so there's a bit of replication

I've enclosed an image to show where the LineSeries is inserted

I've tried changing the <React.Fragment> code to <>, and thought about an iterator without {this.props.children}, but I've not got completely comfortable with the react way of handling repeating elements just yet.

I'm trying to avoid asking for n datasets in a massive block of conditional rendering - as this seems the wrong way to go about this, unless its the only way.

class ProtoListView extends Component {
  constructor(props) {
    super(props)
    this.state = {
      results: [],
    }
  }

  componentDidMount() {

  }

  render() {
    const { classes } = this.props;
    let listItems = [];

    if (this.props.ready === 1) {
      this.props.recordset.forEach((element, key) => {
        listItems.push(element)
      });
      return listItems.map(e =>
        <React.Fragment>
          <Container className={classes.title}><Typography align="center" color="secondary" className={classes.charts} >{e.title}</Typography></Container>
          <ProtoTeleChart data={e} ready={this.props.ready} >
            <ProtoTeleChartSeries data={e} />
          </ProtoTeleChart>
        </React.Fragment>
      );
    }
    return listItems;
  }
}

ProtoListView.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ProtoListView);


class ProtoTeleChart extends Component {
  constructor(props) {
    super(props)
    this.state = {
      lineSeries: [],
    } 
  }

  render() {
    if (this.props.ready === 1) {

      let dataArr = [];
      let min = this.props.data.labels.yAxis.range["min"]; 
      let max = this.props.data.labels.yAxis.range["max"];
      let keys = Object.keys(this.props.data.labels.attribs);

      keys.forEach((k) => {
        dataArr = this.props.data.attribs.map((d) => {     

          return {
            x: d.index,
            y: d[k],
          }    
        })
        this.state.lineSeries.push(dataArr);
      });
      /* LineSeries is included to show where it should generate the child*/
      return (
        <XYPlot  yDomain={[min,max]}  height={300} width={800}>      
          <HorizontalGridLines />
          <XAxis  title={this.props.data.labels.xAxis.label} />
          <YAxis  title={this.props.data.labels.yAxis.label} />

          <LineSeries  style={{ stroke: 'violet', strokeWidth: 2 }} data={this.state.lineSeries[0]} />
          {this.props.children}      
        </XYPlot>
      )
    return "";
  }
}
}
export default ProtoTeleChart

class ProtoTeleChartSeries extends Component {
  constructor(props) {
    super(props)
    this.state = {
      results : [],
    } 
  }

  render() {


      let dataArr = [];
      let lineSeries = [];
      let min = this.props.data.labels.yAxis.range["min"]; 
      let max = this.props.data.labels.yAxis.range["max"];
      let keys = Object.keys(this.props.data.labels.attribs);


      keys.forEach((k) => {
        dataArr = this.props.data.attribs.map((d) => {     

          return {
            x: d.index,
            y: d[k],        
          }    
        })

        lineSeries.push(dataArr);
    })

    return (    
      <React.Fragment>
            <LineSeries  style={{ stroke: 'violet', strokeWidth: 2 }} data={lineSeries[1]} />
          </React.Fragment>
      )
    }
  }

export default ProtoTeleChartSeries

I've enclosed the image to show that the dataset is both empty and in the wrong place and I've check to make sure the data is received within the child LineSeries correctly when it is passed into

The data being empty I figure could be a scope issue, but it being excluded from the svg I assume is mis-usage of the react-vis library.

Image not loading so the liink is url: https://drive.google.com/open?id=0B-kqm_hXFyf5UXpia3pWMjUxblhnRGF4aDUwdlZmSnVSQXdv