react-jsx-highcharts "ghost" opposite axis

App.js

import React, {Component} from 'react';
import highcharts from 'highcharts';
import { HighchartsChart, Chart, XAxis, YAxis, LineSeries, withHighcharts } from 'react-jsx-highcharts';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showSecondarySeries: false
        };
    }

    render() {
        return (
            <div style={{ margin: 20 }}>
                <div style={{ marginBottom: 20 }}>
                    <button onClick={() => this.setState({
                        showSecondarySeries: !this.state.showSecondarySeries
                    })}>Toggle data</button>
                </div>

                <HighchartsChart>
                    <Chart/>

                    <XAxis/>

                    <YAxis id="yAxisPrimary">
                        <YAxis.Title>Primary</YAxis.Title>
                        <LineSeries id='primary' data={[ 1, 2, 3, 4, 5 ]}/>
                    </YAxis>

                    {this.state.showSecondarySeries
                        ?
                            <YAxis id="yAxisSecondary" title={{ text: 'Secondary'}} opposite>
                                <LineSeries id='secondary' data={[ 5, 4, 3, 2, 1 ]}/>
                            </YAxis>
                        : undefined}
                </HighchartsChart>
            </div>
        );
    }
}

export default withHighcharts(App, highcharts);