Theming is not working with React

The "theme" propery is not working when using React.
To reproduce: just launch this single HTML page in the browser, you will notice the theme is stuck to "light1". Please notice that I copied the CanvasJSChart React Component directly in the file since there is no CDN available.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Batch stats</title>
    <script crossorigin src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/excanvas.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>
    <style>
        * {
            outline: none;
            font-family: courier, sans-serif;
        }

        html {
            background-color: #333;
            color: #fff;
        }

        summary {
            font-weight: 800;
            color: #6bc3d2;
        }

        ul {
            list-style: none;
        }

        .canvasjs-chart-credit {
            display: none;
        }
    </style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    CanvasJS = CanvasJS.Chart ? CanvasJS : window.CanvasJS;

    class Test extends React.Component {
        render() {
            const options = {
                animationEnabled: true,
                exportEnabled: true,
                theme: "dark2", // "light1", "dark1", "dark2"
                title:{
                    text: "Trip Expenses"
                },
                data: [{
                    type: "pie",
                    indexLabel: "{label}: {y}%",
                    startAngle: -90,
                    dataPoints: [
                        { y: 20, label: "Airfare" },
                        { y: 24, label: "Food & Drinks" },
                        { y: 20, label: "Accomodation" },
                        { y: 14, label: "Transportation" },
                        { y: 12, label: "Activities" },
                        { y: 10, label: "Misc" }
                    ]
                }]
            }

            return (
                    <div>
                        <CanvasJSChart options = {options}
                                /* onRef={ref => this.chart = ref} */
                        />
                        {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
                    </div>
            );
        }
    }

    class CanvasJSChart extends React.Component {
        static _cjsContainerId = 0

        constructor(props) {
            super(props);
            this.options = props.options ? props.options : {};
            this.containerProps = props.containerProps
                    ? props.containerProps
                    : {width: "100%", position: "relative"};
            this.containerProps.height = props.containerProps && props.containerProps.height
                    ? props.containerProps.height
                    : this.options.height ? this.options.height + "px" : "400px";
            this.chartContainerId = "canvasjs-react-chart-container-" + CanvasJSChart._cjsContainerId++;
        }

        componentDidMount() {
            this.chart = new CanvasJS.Chart(this.chartContainerId, this.options);
            this.chart.render();

            if (this.props.onRef)
                this.props.onRef(this.chart);
        }

        shouldComponentUpdate(nextProps) {
            return !(nextProps.options === this.options);
        }

        componentDidUpdate() {
            this.chart.options = this.props.options;
            this.chart.render();
        }

        componentWillUnmount() {
            this.chart.destroy();
            if (this.props.onRef)
                this.props.onRef(undefined);
        }

        render() {
            return <div id={this.chartContainerId} style={this.containerProps}/>
        }
    }

    function Chart() {
        const options = {
            animationEnabled: true,
            exportEnabled: true,
            theme: "dark1", //"light1", "dark1", "dark2"
            title: {
                text: "Simple Column Chart with Index Labels"
            },
            data: [{
                theme: "dark1",
                type: "pie", //change type to bar, line, area, pie, etc
                indexLabel: "{y}", //Shows y value on all Data Points
                indexLabelFontColor: "#5A5757",
                indexLabelPlacement: "outside",
                dataPoints: [
                    {x: 10, y: 71},
                    {x: 20, y: 55},
                    {x: 30, y: 50},
                    {x: 40, y: 65},
                    {x: 50, y: 71},
                    {x: 60, y: 68},
                    {x: 70, y: 38},
                    {x: 80, y: 92, indexLabel: "Highest"},
                    {x: 90, y: 54},
                    {x: 100, y: 60},
                    {x: 110, y: 21},
                    {x: 120, y: 49},
                    {x: 130, y: 36}
                ]
            }]
        }
        return (
                <div>
                    <CanvasJSChart options={options}/>
                </div>
        );
    }

    function Page(props) {
        return (
                <div>
                    <h1>Hello World</h1>
                    <Chart/>
                    <Test/>
                </div>
        );
    }

    ReactDOM.render(<Page/>, document.getElementById('root'));
</script>
</body>
</html>
tsur / canvasjs

Theming is not working with React #22
