title: Referencing a Highcharts object as a React element (typescript)
body: <p>I need to set some conditional properties of a Highcharts object and then render it. This is my trial and error code and results so far.</p>
  
  <pre><code>const Charts = ReactHighcharts.withHighcharts(Highstock);
  
  public render(): React.ReactNode {
  
          const chart = new Charts();
  
          // set some passed in options
          const chartOptions: Options | undefined = this.props.opts;
  
          chart.config = chartOptions;
  
          if(this.drillable()) {
              chartOptions.chart = {};
              chartOptions.chart.events = {
                  drilldown: (event: Highcharts.ChartDrilldownEvent) =&gt; {
                      if (!event.seriesOptions) {
                          if(event.point !== undefined) {
                              // @ts-ignore
                              const pathRoot: List&lt;number&gt; = event.point.path;
  
                              const drilldownSeries = this.getDrillSeries(pathRoot);
                              chart.addSeriesAsDrilldown(event.point, drilldownSeries);      
  
                          }
                      }
                  }
              };
          }
  
          // maybe add some other conditional configurations
  
          return (
              &lt;div&gt;
                { chart }
              &lt;/div&gt;
          );
  }
  </code></pre>
  
  <p>This results in <em>"Objects are not valid as a React child. If you meant to render a collection of children, use an array instead"</em></p>
  
  <p>Wrapping it in an array like this and trying to render the 'elements' gives the same error</p>
  
  <pre><code>const elements: any[] = [];
  elements.push(chart);
  </code></pre>
  
  <p>Also tried some variations of creating JSX elements like this</p>
  
  <pre><code>const elements: JSX.Element[] = [];
  elements.push(React.createElement(chart));
  </code></pre>
  
  <p>which results in: <em>"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. "</em></p>
  
  <p>Also tried just rendering just the element, as in </p>
  
  <pre><code>{ React.createElement(chart) }
  </code></pre>
  
  <p>which gives the same error again.</p>
  
  <p>Edit:</p>
  
  <p>I think I'm getting there but still missing something. i.e.</p>
  
  <pre><code>&lt;ReactHighcharts
   config={chartOptions}
   callback={this.chartCallback}
  /&gt;
  </code></pre>
  
  <p>I set up my 'chartOptions', and then in chartCallback, I need to mutate those same chartOptions again to add the events(chartOptions.chart.events = {drilldown: etc}). </p>
  
  <p>I tried pulling the chartOptions from the chart object inside the callback but this does not mutate the config. Is there a way to get access to the config inside the callback ? Thanks again.</p>